Vite環境で Vue3 + TypeScript + Jest v28のセットアップ

構成

• node 16.12.0
• Vite 3.0.7
• Vue 3.2.37
• TypeScript 4.6.4

やりたいこと

JestとTesting Libraryを入れてVueとTypeScriptのテストコードを書きたい。

入れたもの

• Jest 28.1.3
• Jest Emvironment JSDom 18.1.3
• @type/jest 28.1.7
• @vue/vue3-jest 28.1.0
• ts-jest 28.0.8

作業手順

Vue3のドキュメント内のテストのところとViteで構築した開発中のVue3のプロジェクトにJestを導入するを参考にやっていく。

最初にJestをインストールして jest --init でセットアップはすぐに完了。
jest.config.mjsが作られる。

package.jsonのscriptにtest: "jest" を追加。

ただ npm run test を実行してみると jest-emvironment-jsdom が必要と言われるので調べたら Jest v28に上げるためにやったこと でv28から必要になったらしいので入れる。なお記事中の ts-jest のバージョンは現在は v28.x だったので特に問題なかった。

次にVueファイルなどを扱えるようにtransformを設定する。
しかし vue-jest のインストールに失敗して Jest v28に対応していないと怒られる。

npm ERR! While resolving: vite-project@0.0.0
npm ERR! Found: jest@28.1.3
npm ERR! node_modules/jest
npm ERR! dev jest@"^28.1.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jest@">= 24 < 27 " from vue-jest@5.0.0-alpha.10
npm ERR! node_modules/vue-jest
npm ERR! dev vue-jest@"5.0.0-alpha.10" from the root project

いろいろ調べたけど結局公式にちゃんと書いてあったで、Jest v28かつVue3のパッケージをインストールする。

npm install --save-dev @vue/vue3-jest@28

でconfigファイルのtransform のところもパッケージ名を変更する。

jest.config.mjs

  transform: {
    '^.+\\.ts$': 'ts-jest',
-    '^.+\\.vue$': 'vue-jest'
+    '^.+\\.vue$': '@vue/vue3-jest@28'
  }

実行してみる。

npm run test

できた。

vite-project@0.0.0 test
jest

No tests found, exiting with code 1
Run with --passWithNoTests to exit with code 0
In /Users/********/Documents/workspaces/***********
12 files checked.
testMatch: /tests//.[jt]s?(x), **/?(.)+(spec|test).[tj]s?(x) > - 0 matches
testPathIgnorePatterns: /node_modules/ - 12 matches
testRegex: - 0 matches
Pattern: - 0 matches

あとはTestingLibraryなどを入れて完了。