False Negative: Add support to React.memo 2nd arg "areEquals"

[sandrina-p]

Current behavior

Function Components with React.memo(Component, areEquals) fails when I want to assert that a re-render didn't happen. When using Class Components that bug doesn't happen.

Expected behavior

Function Components with React.memo(Component, areEquals) should not fail when asserting a scenario where a re-render didn't happen.

function DumbMemo({ number }) {
  return <span>It's number {number}</span>;
}

function areEqual(props, nextProps) {
  // this function isn't covered by Enzyme, so the test fails:
  return nextProps.number > 10 && nextProps.number < 20;
}

export default React.memo(DumbMemo, areEqual);

it("<DumbMemo /> - should only re-render when number is between 10 and 20", () => {
  // shallow or mount, both have the same bug
  const tree = shallow(
    <DumbMemo number={5} />
  );

  expect(tree.text()).toBe("It's number 5");

  tree.setProps({ number: 15 });

  // BUG: It should pass, but it fails returning "It's number 15"
  expect(tree.text()).toBe("It's number 5");
});

See Demo at CodeSandbox.

Your environment

• Mac High Sierra, Codesandbox
• node 8.11.4
• npm 5.6

API

• shallow
• mount
• render

Version

library	version
enzyme	3.9.0
react	16.8.6
react-dom	16.8.6
react-test-renderer	N/A

Adapter

• enzyme-adapter-react-16

[ljharb]

Thanks! I had no idea memo took a second argument.

[sandrina-p]

You can check on their docs - React.memo(). The second works like shouldComponentUpdate to "override" the props comparison.

[ljharb]

Fix incoming.