Question

我正在尝试使用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所需的 renderer 。并且还需要一个序列化器，但我在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，则快照为空...但是，看起来此渲染器中缺少某些内容...

非常感谢您！

具有反应测试库的Storyshots

0 个答案: