jest-contain-object

A jest extension to make object comparisons easier by checking to see if an object is a subset of another object.

Getting started

Add the following to your src/setupTests.js or equivalent:

import toContainObject from "jest-contain-object";

expect.extend({
  toContainObject
});

To use, simply use the following syntax in your tests:

expect(something).toContainObject(somethingElse);

Why jest-contain-object?

In testing React components, I frequently ran into issues when looking to ensure that props would contain desired elements. For instance, let's say I have the following component:

const MyComponent = ({ onClick, children }) => (
  <div className="my-component" style={{ margin: "auto" }} onClick={onClick}>
    {children}
  </div>
);

When I want to test the component above, I would typically do two things:

1. Check that the div is always being rendered
2. Ensure that the props are passed properly

I don't really care about testing the className or style props since these are hardcoded/not a part of the component's external API. The issue however, is that the following test (written using Enzyme and Jest) will fail:

const props = {
  onClick: jest.fn(),
  children: "some text"
};

expect(shallow(<MyComponent {...props} />).props()).toEqual(props);

with the following error:

...

expect(received).toEqual(expected)

Expected value to equal:
  {"children": "some text", "className": "my-component", "onClick": [Function mockConstructor], "style": [Object object]}
Received:
  {"children": "some text", "onClick": [Function mockConstructor]}

...

Now, one way to fix this is to change the props object into this:

const props = {
  onClick: jest.fn(),
  className: "my-component",
  children: "some text",
  style: { margin: "auto" }
};

But this can quickly get cumbersome if you have a lot of props that are not variable and/or exposed to the component's external API. It also makes my test unnecessarily brittle and not resistant to simple and relatively insignificant changes like if I changed classNam="my-component" to className="some-component", for instance.

Using jest-contain-object, this test can instead be transformed into:

const props = {
  onClick: jest.fn(),
  children: "some text"
};

it(`should pass all props to 'MyComponent'`, () => {
  expect(shallow(<MyComponent {...props} />).props()).toContainObject(props);
});

Now, all we're checking is to make sure that the props that are exposed to the outside are properly passed to the component without having tests that are overly brittle.

Another use case for this is situations where you're spreading props across rendered elements. Let's take the example:

const MyOtherComponent = ({
  onClick,
  className,
  buttonClassName,
  children
}) => (
  <div className={className}>
    <button className={buttonClassName} onClick={onClick}>
      {children}
    </button>
  </div>
);

In this scenario, we might want to test the following:

1. A div is always rendered
2. A button is always rendered
3. The div always and only gets className
4. The button always and only gets buttonClassName as its className and onClick

Now, we might write some complicated or brittle tests to test all this out. But, using jest-contain-object, we can simply write the following tests to achieve 3 and 4:

const props = {
  className: "hello",
  buttonClassName: "world",
  children: "what's up?",
  onClick: jest.fn()
};

it(`should only give the 'className' prop to the div`, () => {
  const { className, ...otherProps } = props;

  expect(
    shallow(<MyOtherComponent {...props} />)
      .find("div")
      .props()
  ).toContainObject({
    className
  });

  expect(
    shallow(<MyOtherComponent {...props} />)
      .find("div")
      .props()
  ).not.toContainObject(otherProps);
});

it(`should only give the 'buttonClassName', 'onClick', and 'children' props to the button`, () => {
  const { buttonClassName, onClick, children, ...otherProps } = props;

  expect(
    shallow(<MyOtherComponent {...props} />)
      .find("button")
      .props()
  ).toContainObject({
    className: buttonClassName,
    onClick,
    children
  });

  expect(
    shallow(<MyOtherComponent {...props} />)
      .find("button")
      .props()
  ).not.toContainObject(otherProps);
});

Neat, right?

License

jest-contain-object is MIT licensed.