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

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

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

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

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

Viteとは？
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 のrootsもsrcディレクトリに向くように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