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

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

如果需要，可以在序列化之前修改容器的内容，使用 DOM api.

删除不稳定的属性或整个元素

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

Using react-testing-library with storyshots?

reactjs

storybook

react-testing-library