Question

我正在使用React.memo创建文件（反应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导出容器时，是否没有更好/更干净/更简单的名称来显示容器名称？

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

0 个答案: