[英]Jest Snapshot error when using React.memo
I am creating a file using React.memo
(React 16.6.1). 我正在使用React.memo
(React 16.6.1)创建一个文件。
I use jest 23.6 for snapshot. 我使用jest 23.6进行快照。
// Work.js
import React, {memo} from "react";
const Work => (
/* codes */
);
export {Work as WorkNaked};
export default memo(Work);
When saving the snapshot of a component rendering Work, it will render [object Object]
instead of <Work />
, which makes it difficult to maintain and debug later on. 保存组件渲染工作的快照时,它将呈现[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();
});
});
So now we are forcing the name as follow: 所以现在我们强制命名如下:
// Work.js
export {Work as WorkNaked};
const memoWork = memo(Work);
/* eslint-disable-next-line immutable/no-mutation */
memoWork.displayName = "memo(Work)";
export default memoWork;
which will render <memo(Work) />
in our Snapshot. 这将在我们的快照中呈现<memo(Work) />
。
Isn't there a better/cleaner/simpler name to get the container name displayed when exporting it using React.memo ? 使用React.memo导出容器名称时,是否有更好/更清洁/更简单的名称?
It looks like you ran into an enzyme
bug . 看起来你遇到了一个enzyme
虫 。
This pull request adds support for memo, which should render correctly inside of snapshots. 此拉取请求添加了对备忘录的支持,备忘录应在快照内正确呈现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.