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 ?