Vue 的 nextTick 之后如何拍摄 Storybook 的 Storyshots？

【问题标题】：How to take Storybook's Storyshots after Vue's nextTick?Vue 的 nextTick 之后如何拍摄 Storybook 的 Storyshots？
【发布时间】：2020-10-28 12:00:57
【问题描述】：

我正在使用 Storybook 的 Storyshot 和 Vue 并喜欢它，但现在我创建了一些自定义指令来改变 $nextTick 上的 DOM，我希望能够等待并在 $nextTick 之后拍摄故事截图因此 DOM 被正确表示。

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

我的设置是：

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

谢谢！

【问题讨论】：

标签： vue.js jestjs storybook storyshots

【解决方案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();
  }
});

【讨论】：