What's the difference between '.toMatchObject' and 'objectContaining'

Question

I have written the following test:

it('Can decrement the current step', function () {     expect(reducer(TestState, { type: 'GOTO_PREVIOUS_STEP' })).toMatchObject({ currentStep: 4 }); });  it('Can decrement the current step v2', function () {     expect(reducer(TestState, { type: 'GOTO_PREVIOUS_STEP' })).toEqual(expect.objectContaining({ currentStep: 4 })); }); 

both of them seem to pass the test, is there any difference between them? is there a performance impact between them?

Answer 1

From looking at the docs, and my own experimentation to confirm it, the difference is in the handling of objects nested within the props passed as an expectation.

If the expectation object has a property, containing an object, which contains some but not all of the properties in the equivalent property of the actual object, then:

• .toMatchObject() will still pass, as seen in the docs.

• expect.objectContaining() will fail (unless you declare that property in the expectation object itself with expect.objectContaining())

Examples (tested in Jest):

  // objectContaining, with nested object, containing full props/values   // PASSES   expect({ position: { x: 0, y: 0 } }).toEqual(expect.objectContaining({     position: {       x: expect.any(Number),       y: expect.any(Number)     }   }));    // objectContaining, with nested object, containing partial props/values   // FAILS   expect({ position: { x: 0, y: 0 } }).toEqual(expect.objectContaining({     position: {       x: expect.any(Number)     }   }));    // objectContaining, with nested object, also declared with objectContaining, containing partial props/values   // PASSES   expect({ position: { x: 0, y: 0 } }).toEqual(expect.objectContaining({     position: expect.objectContaining({       x: expect.any(Number)     })   }));    // toMatchObject, with nested object, containing full props/values   // PASSES   expect({ position: { x: 0, y: 0 } }).toMatchObject({     position: {       x: expect.any(Number),       y: expect.any(Number)     }   });    // toMatchObject, with nested object, containing partial props/values   // PASSES   expect({ position: { x: 0, y: 0 } }).toMatchObject({     position: {       x: expect.any(Number)     }   }); 

Answer 2

My thinking is that expect.objectContaining (and other matchers like it) can be used instead of literal values inside the "object" you pass to other matchers.

This example is from the docs:

test('onPress gets called with the right thing', () => {   const onPress = jest.fn();   simulatePresses(onPress);   expect(onPress).toBeCalledWith(expect.objectContaining({     x: expect.any(Number),     y: expect.any(Number),   })); }); 

So, while they seem to do the same thing in your example, the expect.* ones are also useful in this other way.