使用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蟲 。

此拉取請求添加了對備忘錄的支持，備忘錄應在快照內正確呈現。