logo标签列表

Storyshots与React-Testing-Library

javascriptreactjssnapshotstorybookreact-testing-library
3
我正在尝试使用 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，快照就是空的... 然而，看起来渲染器中缺少了一些东西...

非常感谢！

1个回答
0

我需要将每个storyshoot放置在单独的文件中，读了一下使用 storyshots 的 react-testing-library？之后，我想出了这个适合我的配置。

  • 它没有渲染不需要的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).)*$/
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接