Viteで構築した開発中のVue3のプロジェクトにJestを導入する

Viteで構築した、開発中のVue3プロジェクトに途中からJestを導入した際にすこし手こずったので、備忘録としてまとめます。
TypeScriptは使っていないです。

手順

1. Jest のセットアップ

$ npm install --save-dev jest @vue/test-utils

$ npm install jest @types/jest ts-jest vue-jest@next @vue/test-utils@next --save-dev

2. 設定ファイルに記述

jest.config.js

module.exports = {
  moduleFileExtensions: [
    'js',
    'ts',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': 'vue-jest'
  }
}

package.json

{
  ...
  "scripts": {
    ...
    "test": "jest src"
  },
  ...
}

3. コマンド実行

$ npm run test

参考記事

Add testing to Vite
Vue Test Utils