テストフレームワークJestとは

—

by

ai
in
日々の備忘録 > web > テストフレームワークJestとは

Jestとは何か

JestはFacebook（現Meta）が開発したJavaScript向けのテストフレームワークです。主にReactアプリケーションのテストで利用されますが、Node.jsやVue、Angularなど幅広い環境でも使用できます。

主な特徴

  • Zero configuration：設定ファイルなしで即座にテストを実行できます。
  • スナップショットテスト：UIコンポーネントの出力を保存し、変更があった場合に検知できます。
  • モック機能：関数やモジュールを簡単にモックできます。
  • 高速なテスト実行：テストの並列実行やキャッシュ機構により高速に動作します。

インストールと基本的な使い方

プロジェクトにJestを導入するにはnpmまたはyarnを使用します。

npm install --save-dev jest
# または
yarn add --dev jest

インストール後、package.jsonにテストスクリプトを追加します。

{
  \"scripts\": {
    \"test\": \"jest\"
  }
}

テストファイルは通常*.test.jsまたは*.spec.jsという名前で作成し、__tests__ディレクトリに置きます。

簡単なテスト例

以下は関数sumのテスト例です。

// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;
// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

コマンドnpm testを実行すると、Jestが自動的にテストを検出し、結果を表示します。

$ npm test

> jest-demo@1.0.0 test
> jest

 PASS  ./sum.test.js
  ✓ adds 1 + 2 to equal 3 (3 ms)

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

スナップショットテストの例

Reactコンポーネントの出力をスナップショットとして保存し、将来的な変更を検出できます。

// Button.js
import React from 'react';

export default function Button({ label }) {
  return <button>{label}</button>;
}
// Button.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Button from './Button';

test('Button renders correctly', () => {
  const tree = renderer
    .create(<Button label="Click me" />)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

初回実行時にスナップショットが__snapshots__フォルダに保存され、以降の実行で差分があればテストが失敗します。

まとめ

Jestは設定が簡単で、モック・スナップショット・並列実行など豊富な機能を備えた強力なテストフレームワークです。JavaScript/TypeScriptのプロジェクトでテストを導入したい場合、まずはJestを試してみることをおすすめします。

Views: 2