我正在尝试使用我的所有故事添加快照storybook
v5.0.5
并对react-testing-library
v6.0.3
我的所有故事进行结构测试。
我正在尝试遵循文档:
https://github.com/infinitered/addon-storyshots/blob/master/README.md#serializer
但不是酶,而是使用react-testing-library
.
含酶:
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
配置,快照是空的......但是,看起来这个渲染器中缺少一些东西......
太感谢了!