1

使用 MockedProvider 呈现最终状态的推荐方法是使用 'waait' 等待事件循环的下一个滴答声。

但是，当使用 storybook storyshots 插件时，您无法访问测试主体以在创建树的那一刻和您对其进行快照的那一刻之间注入等待。

因此，当拍摄快照时，加载状态就是您在那里看到的。

那么，如何让“等待”发生以便看到最终状态呢？

4

2 回答 2

0

要使快照与异步组件一起使用，您可以设置test等待下一个渲染周期的自定义函数以及jestAsync: true选项。

import React from 'react';
import { create, act } from 'react-test-renderer';
import initStoryshots from '@storybook/addon-storyshots';
import wait from 'waait';

initStoryshots({
  asyncJest: true,
  test: async ({ story, done }) => {
    let renderer;
    act(() => {
      // React.createElement() is important because of hooks [shouldn't call story.render() directly]
      renderer = create(React.createElement(story.render));
    });

    // Let one render cycle pass before rendering snapshot
    await act(() => wait(0));

    // save all snapshots to the same file (similar to "snapshotWithOptions")
    expect(renderer).toMatchSnapshot();

    done();
  }
});

或者，如果要将快照保存到多个文件：

import React from 'react';
import { create, act } from 'react-test-renderer';
import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots';
import wait from 'waait';

const converter = new Stories2SnapsConverter();

initStoryshots({
  asyncJest: true,
  test: async ({ story, context, done }) => {
    let renderer;
    act(() => {
      // React.createElement() is important because of hooks [shouldn't call story.render() directly]
      renderer = create(React.createElement(story.render));
    });

    // Let one render cycle pass before rendering snapshot
    await act(() => wait(0));

    // save each snapshot to a different file (similar to "multiSnapshotWithOptions")
    const snapshotFileName = converter.getSnapshotFileName(context);
    expect(renderer).toMatchSpecificSnapshot(snapshotFileName);

    done();
  }
});

更多信息请访问https://github.com/storybookjs/storybook/issues/7745

PS：用和@storybook/react@6.1.18从测试这个@storybook/addon-storyshots@6.1.18MockedProvider@apollo/react-testing@4.0.0

于 2021-03-25T19:15:50.160 回答
-1

调用 initStoryshots 时，可以传递参数。因此，您可以使用序列化程序使用类似于此的代码来完成这项工作：

import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
import wait from 'waait';

initStoryshots({
  framework:'react',
  configPath:'.storybook-snapshots',

  test: multiSnapshotWithOptions({
    serializer: (a) => wait(0).then( () => a )
  })
});

该serializer配置在文档中作为根级别出现在我面前，但在代码中我将其视为配置的一个选项...SnapshotWithOptions。而且它工作得很好。

这里的缺点是，如果您这样做，您将不会再看到加载状态。但是，就我而言，我正在考虑在正常测试中对其进行测试。

于 2018-09-03T20:56:06.420 回答