Jestに入門してみた(環境構築 - 最初のテストまで)

こんにちは！

今回はJest入門についてアウトプットしていこうと思います。

会社の新規プロジェクトでNuxtを使用することとなり、Jestをテストフレームワークとして導入しているので、そのキャッチアップの記事になります。

Jestとは
環境構築
テストファイル
テスト実行コマンド
簡単なテストの実行

Jestとは

公式ドキュメント

JestはJavaScriptのテスティングフレームワークの一つです。

JavaScriptのフレームワーク(Vue React等)、やシンタックスシュガー(TypeScript)等javaScriptを使用したものは基本使えるものとなっています。

npmかyarnがあれば簡単に導入することが可能です。

特徴として一番はスナップショット機能なのではないかと思っています。フロントエンドのテスト初心者の私にとって、この機能は画期的でした。。

環境構築

今回は、Vue3+Docker環境にJestを導入する方法をご紹介します。

Dockerfile docker-compose.ymlの説明は割愛します。

バージョン情報

docker Version: 20.10.17
docker-compose version 1.29.2

Dockerfile

FROM node:17-alpine3.14

WORKDIR /var/www/html

RUN apk update && \
 npm install -g npm && \
 npm install -g @vue/cli

EXPOSE 8080

docker-compose.yml

version: '3.8'

services:
 vue:
 build: ./docker/vue/
 tty: true
 volumes:
 - ./vue:/var/www/html
 ports:
 - 8080:8080

tree

├── docker
│   └── vue
│       └── Dockerfile
├── vue
| (略)
|
├── docker-compose.yml

こちらの設定で実行すればコンテナが立ち上がるはずです。

docker-compose up -d

コンテナが立ち上がったら、Vueプロジェクトの作成をしていきます。

vue create .

今回はカレントディレクトリにソースを置きたいので上記コマンドを実行します。プロジェクト名を付けたい方は自由に命名してもらって構いません。

ここからプロジェクトを作成していく上でJest関連のものをかいつまんで説明します。

Manuallyを選択

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features

Unit Testingを選択

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select,  to t
oggle all, <i> to invert selection, and <enter> to proceed)
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
❯◉ Unit Testing
 ◯ E2E Testing

テストフレームワークの選択>Jestを選択

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys)
❯ Jest 
  Mocha + Chai

In dedicated config filesを選択

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

この4点は注意して後はご自分の好みにカスタマイズして、プロジェクトを作成していください。

自動的にJestが入ったProjectが作成されると思います。

テストファイル

プロジェクト作成されるとtests/unitというディレクトリが自動生成されていると思います。この配下にテストを記述していきます。

tests/unit配下には予めexample.spec.jsというファイルが生成されており、サンプルが自動で用意されています。サンプルのようにテストファイルは.spec.js(あるいは.spec.ts)という拡張子を設定する必要があります。

テスト実行コマンド

今回はnpmを使用して環境を構築しているので下記コマンドで実行できます。

npm run test

上記コマンドをコンテナに入った状態で実行すればテストが実行されるはずです。

簡単なテストの実行

それでは簡単な足し算のテストを実行してみましょう。

test('one + one', () => {
  expect(1 + 1).toBe(2);
});

上記を記載した後テストを実行してみてください。

中身は書いてある通りなのですが、こちらは「1+1の結果は2である」というテストです。

テストの実行にはtestメソッドあるいはitメソッドを使用します。

第一引数には、テストの概要の説明を記述し、第二引数に関数形式でテストを記述していきます。テストの概要はテスト実行時のログに出力されます。

今回のテストではexpectとtoBeを使用しております。意味の通り、expectで実行したい式等を記述し、toBeで予想される結果を記述します。今回はそれぞれ式と結果の数値を設定してみました。

このようにシンプルで分かりやすいのがJestのいい所です。

今回は以上になります。

次回以降もう少し深掘りしていこうと思います。

最後まで読んで頂きありがとうございました！！

たいきゅんの日記

ITエンジニアの積み上げ日記