Vue.jsにViteでVueTestUtilsを導入する

# はじめに

Viteプロジェクトにテストツールを入れたいと思い、
Jestを用いたvue test utilを導入した際の作業です。

私の場合は、JavaScriptベースでコードを書いているので
TypeScript特有の設定は省いております。



# 作業内容

1. パッケージのインストール
2. Jestの設定
3. babelの設定
4. テストの実行



# 1. パッケージのインストール

はじめに必要なパッケージを一括してインストールします。

恐らく、各パッケージの役割は以下の通りだと思います。

|  | パッケージ | 用途 | 備考 |
|:-:|:-:|:-:|:-:|
| 1 | @vue/test-utils@next | VueTestUtils自体 | [VueTestUtils公式ページ](https://test-utils.vuejs.org/installation/#installationページ) |
| 2 | vue-jest@next | JestにVueファイルを認識させる | [VueTestUtils公式ページ](https://test-utils.vuejs.org/installation/#installationページ) |
| 3 | jest | Jest自体 | [Jest公式ページ](https://jestjs.io/ja/docs/getting-started) |
| 4 | babel-jest | Jestにbabelが適用させる | [Babel公式ページ](https://babeljs.io/setup#installation) |
| 5 | @babel/core | babel自体 | [Babel公式ページ](https://babeljs.io/setup#installation) |
| 6 | @babel/preset-env | babel設定に必要 | [Babel公式ページ](https://babeljs.io/setup#installation) |



```shell:ターミナル

# 開発環境にインストール
% npm install --save-dev @vue/test-utils@next vue-jest@next jest babel-jest @babel/core @babel/preset-env

```



# 2. Jestの設定

rootディレクトリにjest.config.jsを作成します。

ここでは
`moduleFileExtensions:`で対象ファイルを選択し
`transform:`で
・　vue-jestを用いてVueファイルを翻訳
・　babel-jestを用いてES6のJavaScriptコードのJSファイルを翻訳
しています。

以下記事を参考にしています。

https://github.com/lmiller1990/vtu-next-demo/blob/master/jest.config.js

https://dev.to/vuesomedev/add-testing-to-vite-4b75

```js:jest.config.js

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

```



# 3. babelの設定

rootディレクトリにbabel.config.jsを作成します。

インストールした@babel/preset-envをプリセットに登録して
現在のNodeバージョンに適用させます。

これでimport関数などのES6以降の文法が使用できるようになります。

下記GitHubの実装例をそのまま使ってます。

https://github.com/lmiller1990/vtu-next-demo/blob/master/babel.config.js

```js:babel.config.js

module.exports = {
  presets: [
    ['@babel/preset-env',
      {
        targets: {
          node: 'current'
        }
      }
    ]
  ]
}

```



# 4. テストの実行

それでは、テストを実行させて動作を確認しましょう。

まず、package.jsonで
npm run testをターミナルで実行すると
jestが走るように設定します。


```json:package.json

{
  --省略--
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint --fix src/**/*.vue",
    "format": "prettier --write src/**/*.vue",
    //　追加
    "test": "jest"
  },
  --省略--
}

```

続いて、任意の場所にテストファイルを置きます。

```js:tests/SignupForm.spec.js

import { shallowMount } from "@vue/test-utils"
import SignupForm from "../src/components/SignupForm"

describe("初期状態のテスト", () => {
  it("名前が未入力である", () => {
    const wrapper = shallowMount(SignupForm);
    const nameInput = wrapper.get("#name").element.value;

    expect(nameInput).toBe("");
  });
})

```



最後にコマンドを実行して確認します。

```shell:ターミナル

# Jestを実行
% npm run test

## テスト成功
 PASS  tests/SignupForm.spec.js (6.497 s)
  初期状態のテスト
    ✓ 名前が未入力である (156 ms)

```

# ディレクトリ構造

最終的なディレクトリ構造は下記となりました。

```shell:ターミナル
% tree root

root
├── babel.config.js
├── jest.config.js
├── node_modules
│   └── @vue
│       └── test_utils
├── package.json
├── src
│   └── components
│       └── SignupForm.vue
└── tests
    └── SignupForm.spec.js

```


# その他の参考記事

https://qiita.com/yukihiro-hyakuta/items/4515df3ca61299214509



# 終わりに

JestもVueTestUtilsも使い慣れていないので、設定不十分な部分が多々あるかもしれません…

なので、テストコードを記述しながら、不備が見つかれば都度修正します！

最後までお読みいただき、ありがとうございました。