javascript - 使用 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);

保存组件渲染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 bug .

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