将 react-testing-library 与 storyshots 一起使用? [英] Using react-testing-library with storyshots?

问题描述

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

Is it possible to use react-testing-library with the storybook storyshots addon? I'd like to generate some tests for react components which do not use enzyme.

推荐答案

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

Probably a bit late for you, but just been looking at this exact problem. This is the config I came up with which seems to work for me.

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 serializersnapshotSerializers 从结果中获取容器的选项渲染函数，并传递其 firstChild 进行序列化.

The secret is to pass in a custom Jest serializer for the snapshotSerializers option that gets the container from the result of the render function and passes its firstChild to be serialized.

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

If you need to, you can modify the content of the container before serializing, to remove unstable attributes or entire elements using the DOM api.

这篇关于将 react-testing-library 与 storyshots 一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！