我正在尝试使用 storybook 添加快照v5.0.5和 react-testing-library v6.0.3对我所有的故事进行结构测试。
我正在尝试遵循文档:
https://github.com/infinitered/addon-storyshots/blob/master/README.md#serializer
但不是使用 enzyme ，而是使用 react-testing-library .
含 enzyme :
import initStoryshots from '@storybook/addon-storyshots';
import toJSON from 'enzyme-to-json';
initStoryshots({
renderer: mount,
serializer: toJSON,
framework: 'react',
storyRegex: /.*\.stories\.js/,
});
与 react-testing-library (我正在尝试做什么):
import initStoryshots from '@storybook/addon-storyshots'
import { render } from 'react-testing-library'
initStoryshots({
renderer: render,
framework: 'react',
storyRegex: /.*\.stories\.js/,
})
我不确定 render方法是 Storyshot api 需要的渲染器。并且还需要一个序列化器，但我没有在 react-testing-library 中找到等效项.
使用这些配置，正在创建快照。然而，这些快照根本不正确......
看起来节点没有属性，而是显示了很多无用的属性...
创建的快照示例:
exports[`Storyshots Components.Accordion with a custom button 1`] = `
Object {
"asFragment": [Function],
"baseElement": <body>
<div />
<div>
</div>
</body>,
"container": <div>
</div>,
"debug": [Function],
"findAllByAltText": [Function],
"findAllByDisplayValue": [Function],
"findAllByLabelText": [Function],
"findAllByPlaceholderText": [Function],
"findAllByRole": [Function],
"findAllByTestId": [Function],
"findAllByText": [Function],
"findAllByTitle": [Function],
"findByAltText": [Function],
"findByDisplayValue": [Function],
"findByLabelText": [Function],
"findByPlaceholderText": [Function],
"findByRole": [Function],
"findByTestId": [Function],
"findByText": [Function],
"findByTitle": [Function],
"getAllByAltText": [Function],
"getAllByDisplayValue": [Function],
"getAllByLabelText": [Function],
"getAllByPlaceholderText": [Function],
"getAllByRole": [Function],
"getAllBySelectText": [Function],
"getAllByTestId": [Function],
"getAllByText": [Function],
"getAllByTitle": [Function],
"getAllByValue": [Function],
"getByAltText": [Function],
"getByDisplayValue": [Function],
"getByLabelText": [Function],
"getByPlaceholderText": [Function],
"getByRole": [Function],
"getBySelectText": [Function],
"getByTestId": [Function],
"getByText": [Function],
"getByTitle": [Function],
"getByValue": [Function],
"queryAllByAltText": [Function],
"queryAllByDisplayValue": [Function],
"queryAllByLabelText": [Function],
"queryAllByPlaceholderText": [Function],
"queryAllByRole": [Function],
"queryAllBySelectText": [Function],
"queryAllByTestId": [Function],
"queryAllByText": [Function],
"queryAllByTitle": [Function],
"queryAllByValue": [Function],
"queryByAltText": [Function],
"queryByDisplayValue": [Function],
"queryByLabelText": [Function],
"queryByPlaceholderText": [Function],
"queryByRole": [Function],
"queryBySelectText": [Function],
"queryByTestId": [Function],
"queryByText": [Function],
"queryByTitle": [Function],
"queryByValue": [Function],
"rerender": [Function],
"unmount": [Function],
}
`;
谁能帮我解决这个问题？如果我不提供 renderer在配置上，快照是空的......但是，看起来这个渲染器中缺少一些东西......
非常感谢!
最佳答案
我需要将每个故事都放在一个单独的文件中，阅读后:Using react-testing-library with storyshots? ，我想出了适合我的配置。
- 它没有呈现不需要的
testing-library参数 - 它在单独的文件中
也许有人会发现它很有用。
import path from 'path';
import { render } from '@testing-library/react';
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter } from '@storybook/addon-storyshots';
const reactTestingLibrarySerializer = {
print: (val, serialize) => serialize(val.container.firstChild),
// eslint-disable-next-line no-prototype-builtins
test: (val) => val && val.hasOwnProperty('container')
};
initStoryshots({
framework: 'react',
integrityOptions: { cwd: path.join(__dirname, 'stories') },
test: multiSnapshotWithOptions({
renderer: render
}),
snapshotSerializers: [reactTestingLibrarySerializer],
stories2snapsConverter: new Stories2SnapsConverter({
snapshotsDirName: './__snapshots__/',
storiesExtensions: ['.js', '.jsx', '.ts', '.tsx']
}),
storyKindRegex: /^((?!.*?DontTest).)*$/
});
关于javascript - 使用 react-testing-library 的故事截图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55444250/