Jest Snapshot error when using React.memo

Question

I am creating a file using React.memo (React 16.6.1).
I use jest 23.6 for snapshot.

// Work.js
import React, {memo} from "react";
const Work => (
  /* codes */
);

export {Work as WorkNaked};
export default memo(Work);

When saving the snapshot of a component rendering Work, it will render [object Object] instead of <Work /> , which makes it difficult to maintain and debug later on.

// Container.js
import React, {Component} from "react";

export class Container extends Component {
  render () {
    return (
      <Work />
    );
  }
}

// Container-test.js
describe("Container component", () => {
  const wrapper = shallow(<Container />);

  it("should render contents with a proper slug", () => {
    expect(wrapper).toMatchSnapshot();
  });
});

So now we are forcing the name as follow:

// Work.js
export {Work as WorkNaked};

const memoWork = memo(Work);
/* eslint-disable-next-line immutable/no-mutation */
memoWork.displayName = "memo(Work)";
export default memoWork;

which will render <memo(Work) /> in our Snapshot.

Isn't there a better/cleaner/simpler name to get the container name displayed when exporting it using React.memo ?

Answer 1

It looks like you ran into an enzyme bug .

This pull request adds support for memo, which should render correctly inside of snapshots.