reactjs - 将 react 测试库与故事镜头一起使用？

Question

是否可以将react-testing-library与故事书故事镜头插件一起使用？我想为不使用 enzyme 的 react 组件生成一些测试。

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).)*$/
});

secret 是传入自定义 Jest serializer对于 snapshotSerializers从渲染函数的结果获取容器并传递其firstChild进行序列化的选项。

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