Я пытаюсь добавить снимки, используя 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 - это средство визуализации , необходимое для API Storyshot. А также нужен сериализатор , но я не нашел эквивалента в 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 в конфигурации, снимок будет пустым ... Однако, похоже, что в этом рендерере чего-то не хватает ...
Спасибо большое!