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

Created on 21 May 2019 · 3Comments · Source: enzymejs/enzyme

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.