使用 React.memo 时出现 Jest Snapshot 错误答案

【问题标题】：Jest Snapshot error when using React.memo使用 React.memo 时出现 Jest Snapshot 错误
【发布时间】：2019-04-15 20:25:06
【问题描述】：

我正在使用 React.memo (React 16.6.1) 创建一个文件。
我使用 jest 23.6 进行快照。

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

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

保存组件渲染Work的快照时，会渲染[object Object]而不是<Work />，这样后期维护和调试都比较困难。

// 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();
  });
});

所以现在我们强制命名如下：

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

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

这将在我们的快照中呈现<memo(Work) />。

在使用 React.memo 导出容器名称时，是否有更好/更简洁/更简单的名称来显示容器名称？

【问题讨论】：

我认为您可能想深入了解ShallowWrapper 并匹配组件本身的快照。
不，unittest 应该只测试一个组件。 Work-test 的测试将使用 WorkNaked，但其他使用 Work（和其他东西）的组件将只能看到 Work 的记忆版本，因此他只想在该组件的快照中打印 <memo(Work) />。 memo 自己不添加 displayName 确实很烦人

标签： javascript reactjs jestjs

【解决方案1】：

您好像遇到了enzyme bug。

这个pull request 添加了对备忘录的支持，它应该在快照中正确呈现。

【讨论】：