How to take Storybook's Storyshots after Vue's nextTick?

Question

I'm using Storybook's Storyshots with Vue and loving it, but now I've created some custom directives that alter the DOM on $nextTick, I'd like to be able to wait and take the storyshots after $nextTick so the DOM is represented properly.

Can anyone help explain how I might achieve this?

My setup is:

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

Thanks!

Answer 1

For doing that you'll need to configure Jest to make async tests mounting yourself the stories. It sound's harder that it is actually. This is my configuration on 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();
  }
});