Vue3 での Storybook v6.3.13 から v6.5.14 にアップデートする

.
├── /components
│   ├── button.stories.js
│   └── button.vue
├── /__tests__
│   ├── /__snapshots__
│   │   └── button.stories.storyshot
│   └── dom.test.js
├── main.js
└── package.json

    "@storybook/builder-webpack5": "~6.5.14",
    "@storybook/manager-webpack5": "~6.5.14",

  // Stroybook 6.4 以上にしたときにビルド失敗してしまう
  // webpack5 の builder を用いることで成功するので設定
  core: {
    builder: 'webpack5',
  },

const isFunction = (obj) => !!(obj && obj.constructor && obj.call && obj.apply);
const optionsOrCallOptions = (opts, story) => (isFunction(opts) ? opts(story) : opts);

function snapshotWithOptions(options) {
  return async ({ story, context, renderTree, snapshotFileName }) => {
    const result = renderTree(story, context, optionsOrCallOptions(options, story));
    
    function match(tree) {
      let target = tree;
      const isReact = story.parameters.framework === 'react';

      if (isReact && typeof tree.childAt === 'function') {
        target = tree.childAt(0);
      }
      if (isReact && Array.isArray(tree.children)) {
        [target] = tree.children;
      }

      if (snapshotFileName) {
        expect(target).toMatchSpecificSnapshot(snapshotFileName);
      } else {
        expect(target).toMatchSnapshot();
      }

      if (typeof tree.unmount === 'function') {
        tree.unmount();
      }
    }

    if (typeof result.then === 'function') {
      return result.then(match);
    }

    return match(result);
  };
}

function multiSnapshotWithOptions(options = {}) {
  return async ({ story, context, done, renderTree, stories2snapsConverter }) => {
    const snapshotFileName = stories2snapsConverter.getSnapshotFileName(context);

    // snapshots の生成位置がルートディレクトリ直下にできてしてしまう
    // そのため生成位置を src/__tests__ 配下になるようにする
    // ref: https://github.com/storybookjs/storybook/issues/18628
    const newSnapshotFileName = `${__dirname}/${snapshotFileName.substring(
      '../../components/'.length,
    )}`;

    await snapshotWithOptions(options)({ story, context, renderTree, snapshotFileName: newSnapshotFileName });
    done();
  };
}

const test = multiSnapshotWithOptions();

initStoryshots({
  test
});

import initStoryshots, { Stories2SnapsConverter } from '@storybook/addon-storyshots'
import { mount } from '@vue/test-utils'
import { resolve } from 'path'

initStoryshots({

  test: ({ story, context, stories2snapsConverter }) => {
    const snapshotFileName = resolve(
      __dirname,
      stories2snapsConverter.getSnapshotFileName(context)
    )

    const storyElement = story.render()
    const wrapper = mount(storyElement)
    expect(wrapper.element).toMatchSpecificSnapshot(snapshotFileName)
  },
})

const wrapper = mount(storyElement, {
  global: {
  // スナップショット内に transition などの stub を生成しないように設定
    stubs: {
      transition: false,
      'transition-group': false,
    },
  },
});

    const storyElement = story.render()
    const wrapper = mount(storyElement)
+   await flushPromises()
    expect(wrapper.element).toMatchSpecificSnapshot(snapshotFileName)

function sleep(milliSecond) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), milliSecond);
  });
}

// 連続する Promise を処理したい。
// 100に意味はないが無限に Promise を積む場合に終わらなくなるので一定の上限は必要。
// Vue.nextTick() では MSW の終了を待てない。
// flushPromises() を行うべきでも本来は十分であるが、複数回の通信の結果を待ちたいため、過分に待機する
for (let i = 0; i < 100; i++) {
  await sleep(0);
}
// await flushPromises();