繁体   English   中英

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

[英]Jest Snapshot error when using React.memo

我正在使用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导出容器名称时,是否有更好/更清洁/更简单的名称?

看起来你遇到了一个enzyme

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM