Nuxt.jsとstorybook for vueでStoryShotsを追加してみたが、storybook-addon-vue-infoでエラーとなってしまう

Question

発生している問題・エラーメッセージ

Nuxt,jsからプロジェクトを作成し、以下を参考にStoryShotsを設定しました。
https://github.com/storybookjs/storybook/tree/next/addons/storyshots/storyshots-core
しかし、npm test を実行したら、以下のようなエラーが出てきてしまいます。

 FAIL  ./Storyshots.test.js
  ● Test suite failed to run

    C:…\node_modules\storybook-addon-vue-info\lib\index.js:25
    import Vue from 'vue';
           ^^^

    SyntaxError: Unexpected identifier

      4 | import { action } from "@storybook/addon-actions";
      5 | import { addDecorator, configure } from "@storybook/vue";
    > 6 | import { withInfo } from "storybook-addon-vue-info";
        | ^
      7 | import { withNotes } from "@storybook/addon-notes";
      8 | import requireContext from 'require-context.macro';
      9 |

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (.storybook/config.js:6:1)

storybook-addon-vue-infoをimportしたことが原因のようですが、正直、対応方法がわからないので、どなたか教えてください。

該当のソースコード

githubに(プロジェクトを)公開してみたので、お手数ですが、ご確認をお願いします。
https://github.com/reprepstud/storybook-nuxt-test/blob/master/.storybook/config.js

Answer 1

おそらく以下に示すものが最もコンパクトな対応です。

見たところ、そのconfigはvue-infoをglobalにaddしていますね。
で、あるならば、あなたがやるべき事はたった一つです。

jestでstoryを読むときだけvue-infoを読み込まないようにします。

以下は僕が実際にプロジェクトで使用しているconfig.jsからの抜粋です。

if (typeof jest === "undefined") {
  // jestがグローバルに存在しないとき、つまり普通にstorybookを起動したときだけ、
  // vue-infoを読み、登録するようにします。
  const { withInfo } = require('storybook-addon-vue-info');
  addDecorator(withInfo({ info: true }));
}

storyshotのテストは、

1. まず、テストを行うためにはstorybookがバックグラウンドで立ち上がっている状態にします。この時のstorybookは通常、僕らが見ているものと同じように、つまり、vue-infoを読み込んで起動して問題ありません。
2. そしてテスト時、storyshotは、起動したstorybookのstoryを把握するために、./storybook/config.jsを読み込みます。この時、アドオンのを読むことにはまったく意味がありません。実際にhttpリクエストを受け付け、画面を返すのは1で起動済みのstorybookなのですから。

jestからstorybookを読みに行く際、当然、globalにはjestが存在しています。
ただ、それを判定して、jestからstoryを読む際にglobalなaddonの読み込みコードを無かったことにしてあげれば良いのです。

Answer 2

RequireContextHookを使えるようにします。

diff --git a/Storyshots.test.js b/Storyshots.test.js
index b5a8d71..f1d4528 100644
--- a/Storyshots.test.js
+++ b/Storyshots.test.js
@@ -1,3 +1,5 @@
 import initStoryshots from '@storybook/addon-storyshots';
+import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
 
-initStoryshots();
\ No newline at end of file
+registerRequireContextHook();
+initStoryshots();

テスト実行時のbabelの設定を書きます。

diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000..5b02a2c
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current'
+            }
+          }
+        ]
+      ],
+      plugins: ['require-context-hook']
+    }
+  }
+}

デフォルトのjestの設定では node_modules 配下はbabelのトランスパイル対象外なので、storybook-addon-vue-infoをトランスパイル対象にします。

diff --git a/jest.config.js b/jest.config.js
index 40cb15a..e9d8bdf 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -11,7 +11,7 @@ module.exports = {
     '.*\.(vue)$': '<rootDir>/node_modules/jest-vue-preprocessor',
   },
   transformIgnorePatterns: [
-    '/node_modules/(?!(@storybook/.*\.vue$))',
+    '/node_modules/(?!(@storybook/.*\.vue$|storybook-addon-vue-info))'
   ],
   setupFiles: ['<rootDir>/.jest/register-context.js']
-};
\ No newline at end of file
+};

ログです。コンポーネントのエラー出てますが、対象の問題は解決してます。

~/work/storybook-nuxt-test teratail 5m 50s
❯ ./node_modules/jest/bin/jest.js -c ./jest.config.js --no-cache Storyshots.test.js
 PASS  ./Storyshots.test.js
  Storyshots
    Button
      ✓ default (33ms)

  console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Invalid handler for event "click": got undefined
    
    found in
    
    ---> <Button>
           <Anonymous>
             <Root>

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 passed, 1 total
Time:        5.37s
Ran all test suites matching /Storyshots.test.js/i.