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

Question

我正在使用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);

保存组件渲染工作的快照时，它将渲染[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导出容器时，是否没有更好/更干净/更简单的名称来显示容器名称？

Answer 1

您似乎遇到了enzyme错误。

此拉取请求添加了对备忘录的支持，该备忘录应该在快照内正确呈现。