Как сделать Storybook's Storyshots после Vue nextTick?

Question

Я использую Storyshots из Storybook с 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();
  }
});