Question

使用MockedProvider渲染最终状态的推荐方法是使用“ waait”等待事件循环的下一个刻度。

但是，使用故事书Storyshots插件时，您没有权限在创建树和快照快照之间注入等待时间。

因此，拍摄快照时，您在此处看到的是加载状态。

那么，如何才能使“等待”发生以查看最终状态？

Answer 1

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

q = t - i

我在文档中将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配置的一个选项。这样效果很好。

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

Answer 2

要使快照与异步组件一起使用，您可以设置一个等待下一个渲染周期的自定义 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.18 和 MockedProvider 以及 @apollo/react-testing@4.0.0 对此进行了测试

如何使用Apollo的MockedProvider设置Storybook的Storyshots插件

2 个答案: