Vite + TypeScriptプロジェクトにJestを導入してみる

こんにちは!たぬきうどんです!

私は2018年に非IT業界から未経験でエンジニアに転職し、現在までエンジニアとして働いています。

この記事ではVite + TypeScriptプロジェクトにJestを導入する方法を書いています。

Viteとは?

Viteフロントエンドプロジェクト用のビルドツール

HMRを備えた高速な開発サーバーモジュールバンドラーであるRollupを使用してプロダクションビルドを行うといった特徴を持ちます。

「Vite」はフランス語で「素早い」という意味を持つようです。

Jestとは?

Jestシンプルさを重視したJavaScriptテスト用フレームワーク

Babel、TypeScript、Node、React、Angular、Vue等のプロジェクトで実行が可能です。

今回はTypeScriptも使用しているため、Jestトランスフォーマーライブラリであるts-jestも合わせて使用します。

導入方法

今回の記事ではVite + TypeScriptプロジェクトへのJest導入のみを行います。

React、Vueといったライブラリ&FWに合わせたセッティングは行いません。

環境

実行時の各ツール&ライブラリのバージョンは以下です。

OSはWindowsです。

  • node v16.13.1
  • npm v8.1.2
  • vite v2.7.2
  • jest v27.4.7
  • ts-jest v27.1.2

Vite + TypeScriptプロジェクト作成

まずはVite + TypeScriptプロジェクトを作成します。

以下のコマンドを入力し、対話的にプロジェクトを作成していきましょう。

コマンドプロンプト
npm init vite@latest

今回はVanilla + TypeScriptプロジェクトを作成します。

コマンドプロンプト
√ Project name: ... test-vite
√ Select a framework: » vanilla
√ Select a variant: » vanilla-ts

作成されたプロジェクトは以下のようなディレクトリ構成になっていると思います。

├─ src
| ├─ main.ts
| ├─ style.css
|  └─ vite-env.d.ts
|
├─ .gitignore
├─ favicon.svg
├─ index.html
├─ package.json
└─ tsconfig.json

プロジェクトの作成に成功したら、プロジェクトに移動し、モジュールのインストールを行います。

コマンドプロンプト
npm i

モジュールのインストールが終了したら、プロジェクトを開発サーバーが起動できるか確認しておきましょう。

コマンドプロンプト
npm run dev

http://localhost:3000/でプロジェクトが立ち上がっているはずなので、アクセスして確認してみましょう。

Jestのインストール

続いてJestのインストールを行います。

Jest、ts-jestに併せて、TypeScriptでテストを書くため、Jestの型定義ライブラリである@types/jestをインストールします。

コマンドプロンプト
npm install --save-dev jest ts-jest @types/jest

Jestの設定ファイルの作成

続いてJestの設定ファイルを作成します。

以下のコマンドを実行し、Jestの設定ファイルを作成します。

コマンドプロンプト
npx ts-jest config:init

実行に成功すると、Jestの設定ファイルであるjest.config.jsが作成されます。

テストの作成&実行

それではテストを作成していきます。

まずはsrcディレクトリにindex.tsファイルを作成し、テスト用にメソッドを作成します。

index.ts
/**
 * 合計メソッド
 * @param {number} a
 * @param {number} b
 * @returns {number} 合計値
 */
const sumNumber = (a: number, b: number) => {
  return a + b;
};

export { sumNumber };

続いて、テストファイル用ディレクトリ__tests__srcの下に作成します。

また、Jest のrootssrcディレクトリに向くようにjest.config.jsにて設定しておきます。

jest.config.js
module.exports = {
  // 中略
  roots: ["<rootDir>/src"],
};

お待ちかねのテストファイルを作成します。

src/__tests__index.test.tsを作成し、テストコードを書きます。

index.test.ts
import { sumNumber } from "../index";

test("sumNumber test, 1 + 2 to equail 3", () => {
  expect(sumNumber(1, 2)).toBe(3);
});

それではテストを実行してみましょう。

コマンドプロンプト
npx jest

テストに成功すると以下のような結果が出力されるはずです。

コマンドプロンプト
√ sumNumber test, 1 + 2 to equail 3 (2 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.37 s
Ran all test suites.

以上で導入は終了です。

テスト実行コマンドは npmスクリプトに登録しておくとよいでしょう。

package.json
"scripts": {
  "test": "jest"
},

これでnpm run testで実行できるようになります。

最後に…

Vite + TypeScriptプロジェクトにJestを導入&実行してみました。

その他の方法としてJavaScriptトランスコンパイラであるBabelを使用する方法もありますが、TypeScriptを使用する場合、今回の方法のほうが簡単でした。

ただ、VitestというVite用のテストランナーの開発が進んでいるみたいです。

Viteプロジェクトを使用する際はVitestが使用されていくかもしれませんね。

注意

2022/01/09 現在、Vitestは開発中のため、既存のテストランナーからの移行は推奨されていません。

https://vitest.dev/guide/

この記事が皆さんのお役に立てば幸いです!

最後まで読んでいただき、ありがとうございました!

参考文献

コメントを残す

メールアドレスが公開されることはありません。