vue.js - Vue 的 nextTick 之后如何拍摄 Storybook 的 Storyshots？

Question

我正在使用 Storybook 的 Storyshots 和 Vue 并喜欢它，但现在我创建了一些自定义指令来改变 DOM $nextTick，我希望能够等待并拍摄故事快照，$nextTick以便正确表示 DOM。

谁能帮助解释我如何实现这一目标？

我的设置是：

initStoryshots({
  configPath: 'src/_storybook',
  suite: 'web-apps',
  test: multiSnapshotWithOptions(),
});

谢谢！

Answer 1

为此，您需要配置 Jest 以使异步测试安装自己的故事。听起来比实际更难。这是我在 storybook.spec.js 上的配置

import initStoryshots from '@storybook/addon-storyshots';
import { mount } from '@vue/test-utils';

initStoryshots({
  asyncJest: true,
  async test({ story, done }) {
    const wrapper = mount(story.render());

    await wrapper.vm.$nextTick();
    expect(wrapper.element).toMatchSnapshot();
    done();
  }
});