【Vue3 + Jest】でユニットテストを作成する – ①環境準備 –

2021年9月5日2021年9月6日

Vue3 を使ったプロジェクトの単体テストを作成する際にいくつか詰まった点もあったので 1 から記録していきます。

( 今回はまず jest を追加したり等環境準備の部分についてです。その他テストコードについても後ほど更新します。 )

プロジェクトへ jest の追加

まずは既存のプロジェクトへ下記コマンドで jest を追加していきます。

vue add @vue/unit-jest

すると新たに tests/unit のディレクトリとその中に example.spec.js が作成されると思います。

example.spec.js はサンプルのテストが記載されていますが、それをいじって適当に動作確認をしてもいいでしょう。

VSCode で開発している場合は下記 Jest Runner をインストールしておくとエディタからクリックして直接実行できるので便利です。

Babel が動かない問題

いざ試しにサンプルのテストでも実行してみようとすると下記のようなエラーが出ました。

Cannot find module 'babel-preset-env'
    Require stack:
 ・・・・以下略

Babel のアップデートの問題らしく、下記手順を順に行っていくと解決できました。

npx babel-upgrade を実行して Babel のアップグレードをする
@babel/plugin-proposal-function-sent と @babel/plugin-proposal-throw-expressions を yarn add する
babel.config.js を下記のように設定

module.exports = {
    presets: ["@vue/cli-plugin-babel/preset"],
    env: {
      "test": {
          "presets": ["@babel/preset-env"],
          "plugins": [
            ["@babel/plugin-proposal-decorators", { "legacy": true }],
            "@babel/plugin-proposal-function-sent",
            "@babel/plugin-proposal-export-namespace-from",
            "@babel/plugin-proposal-numeric-separator",
            "@babel/plugin-proposal-throw-expressions",
            "@babel/plugin-transform-runtime"
          ]
      },
      "production": {
          "plugins": ["transform-remove-console"]
      }
  }
  };

上記全てを実行すると自分の場合 Babelでエラーは出なくなりました。