将 react-testing-library 与 storyshots 一起使用？

Question

是否可以将 react-testing-library 与 storybook storyshots 插件一起使用？我想为不使用酶的反应成分生成一些测试。

Answer 1

对您来说可能有点晚了，但只是在研究这个确切的问题。这是我想出的配置，似乎对我有用。

import initStoryshots from "@storybook/addon-storyshots";
import path from "path";
import { render } from "react-testing-library";


const reactTestingLibrarySerializer = {
  print: (val, serialize, indent) => serialize(val.container.firstChild),
  test: (val) => val && val.hasOwnProperty("container")
};

initStoryshots({
  configPath: path.join(__dirname, "..", "config", "storybook"),
  framework: "react",
  integrityOptions: { cwd: path.join(__dirname, "stories") },
  renderer: render,
  snapshotSerializers: [reactTestingLibrarySerializer],
  storyKindRegex: /^((?!.*?DontTest).)*$/
});

秘诀是为 snapshotSerializers 选项传入一个自定义的 Jest serializer，该选项从渲染函数的结果中获取容器并传递其 firstChild 以进行序列化。

如果需要，您可以在序列化之前修改容器的内容，以使用 DOM api 移除不稳定的属性或整个元素。