Vue3にテストツールのJestを導入し、シンプルなhookの単体テスト（Unitテスト）を書くだけの初心者向けのライトな内容になります。
Jestとは
JestはJavaScript用のテストフレームワークで（TypeScriptもOK）、Node.jsで動くWebアプリケーションに簡単に組み込めます。
セットアップ
まず新規Vueプロジェクトを作成し、起動できる事を確認
npm init vue@3 test-practice
*プロジェクト作成に関しては詳細を省略しますが、本記事ではTypeScriptを使うので、Add TypeScript? は Yes にしておいてください。
Vueプロジェクトができたら、Jest、その他必要なパッケージをインストールします。
npm install --save-dev jest @vue/test-utils ts-jest @types/jest ts-node
Jestの設定ファイル jest.config.ts をルート直下に作成
内容は以下。これでJestがXXXX.testと拡張子がついたファイルを探し出して、テストを実行してくれます。
const config = {
"roots": [
"<rootDir>/src"
],
"testMatch": [
"**/__tests__/**/*.+(ts|tsx|js)",
"**/?(*.)+(spec|test).+(ts|tsx|js)"
],
"transform": {
"^.+\\.(ts|tsx)$": "ts-jest"
},
};
export default config
package.json のsciprts 内に以下を追記
"test": "jest"
tsconfig.json に以下を追記
"compilerOptions": {
"esModuleInterop": true,
"types": [
"jest"
]
}
これでセットアップはOKです。
テストコード作成
テストコードの前にテスト対象のhookを作ります。
今回はシンプルな足し算、引き算をするだけのhookです。
（格納場所はお任せします）
ファイル名: useCalculate.ts
export const useCalculate = () => {
const add = (a: number, b: number) => {
return a + b
}
const subtract = (a: number, b: number) => {
return a - b
}
return {
add,
subtract
}
}
上記で作ったhookのテストファイルを作ります。
ファイル名: useCalculate.test.ts
import { describe, test, expect } from '@jest/globals'
import { useCalculate } from './useCalculate'
const { add, subtract } = useCalculate()
describe('useCalculate', () => {
test('add 1 + 2 to equal 3', () => {
expect(add(1, 2)).toBe(3)
})
test('subtract 10 - 2 to equal 8', () => {
expect(subtract(10, 2)).toBe(8)
})
})
各種メソッドの説明
describe メソッドは、いくつかの関連するテストをまとめるブロックを作成するためのメソッドです。これがなくても動きます。
expect メソッドは、テスト結果を評価するメソッドです。
Jest公式ドキュメントに詳しく載っています。
test('テストの説明文', () => {
expect(関数を実行).toBe(期待する実行結果)
})
これでテスト対象のhookとテストを実行するファイルができました
テストの実行
以下のコマンドで実行します。
npm run test
するとこんな結果がターミナルに表示されると思います。
緑色のPASSは全てのテストが無事に通ったと言う意味です。
試しにテストが失敗するように書いて、テストを実行してみてください。
expect(subtract(10, 2)).toBe(80)
すると赤色でFAILと表示され、どのテストでどこで失敗したのかも表示されます。
まとめ
今回はあくまでも導入と、基本的なユニットテストだけ書いてみました。
次はCircleCIと繋いで、CI/CDのCIパートを実装してみます。