採用トップ

JavaScript応用 カリキュラム

JavaScriptとテスト

このカリキュラムでは、JavaScriptのテストについて体系的に学びます。ソフトウェアの品質を向上させるために、ユニットテストやエンドツーエンド（E2E）テストの役割を理解し、実際にJestやCypressを使ってテストを実装するスキルを身につけます。

1.テストの重要性と概要

1-1. なぜテストが必要なのか？

ソフトウェア開発において、テストは以下のような役割を果たします。

  • バグの早期発見と修正:
    コードをテストすることで、開発段階でバグを発見しやすくなる。
  • リファクタリングの安全性向上:
    既存の機能を修正する際、テストがあることで動作保証ができる。
  • 開発スピードの向上:
    手動テストの負担を減らし、開発をスムーズに進められる。

1-2. テストの種類と特徴

テストにはさまざまな種類がありますが、本カリキュラムでは特に以下の2つに焦点を当てます。

  1. ユニットテスト（Unit Test）
    • 個々の関数やモジュール単位で動作を検証する。
    • 実行速度が速く、バグを局所的に特定できる。
    • Jestを使用して実装する。
  2. エンドツーエンドテスト（E2E Test）
    • 実際のユーザー操作を模倣し、アプリ全体の動作を検証する。
    • UIの変化やAPIの連携も含めた総合的なテストが可能。
    • Cypressを使用して実装する。

2.ユニットテスト（Jest）

2-1. Jestの概要と導入

Jestは、JavaScriptのユニットテストフレームワークの一つで、シンプルな設定と高速な実行が特徴です。

Jestのインストール

npm install --save-dev jest

package.jsonの設定

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

基本的なテストの書き方

Jestを使ったシンプルなテスト例を見てみましょう。

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

sum.test.js
const sum = require('./sum');

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

上記のテストを実行するには、以下のコマンドを実行します。

npm test

2-2. モックとスタブの活用

Jestでは、外部依存を排除してテストしやすくするために「モック」や「スタブ」を使用できます。

モックの例（関数を模倣する）

const fetchData = jest.fn(() => Promise.resolve('データ取得成功'));

test('fetchData は "データ取得成功" を返す', async () => {
  await expect(fetchData()).resolves.toBe('データ取得成功');
});

スタブの例（外部モジュールを置き換える）

jest.mock('./api');
const api = require('./api');

test('APIのレスポンスをモックする', async () => {
  api.getData.mockResolvedValue('モックデータ');
  await expect(api.getData()).resolves.toBe('モックデータ');
});

3.エンドツーエンドテスト（Cypress）

3-1. Cypressの概要とセットアップ

Cypressは、ブラウザ上で実際のユーザー操作を模倣し、アプリケーションの動作を検証するためのツールです。

Cypressのインストール

npm install --save-dev cypress

Cypressの初期設定

npx cypress open

上記のコマンドを実行すると、Cypressの管理画面が開きます。
ここからテストを実行できます。

3-2. ユーザー操作を模倣したテスト

Cypressを使って、ログイン機能をテストする例を見てみましょう。

テスト対象のアプリケーション（login.html）

<form id="login-form">
  <input type="text" id="username" />
  <input type="password" id="password" />
  <button type="submit">ログイン</button>
</form>
<p id="message"></p>

Cypressのテストコード

describe('ログイン機能のテスト', () => {
  it('正しい情報でログインできる', () => {
    cy.visit('/login.html');
    cy.get('#username').type('testuser');
    cy.get('#password').type('password123');
    cy.get('#login-form').submit();
    cy.get('#message').should('contain', 'ログイン成功');
  });
});

まとめ

本カリキュラムでは、JavaScriptのテストについて学びました。

✅ ユニットテスト（Jest）:
小さな単位で関数の動作を検証する。

✅ モック・スタブ:
外部依存を排除して、テストしやすくする。

✅ エンドツーエンドテスト（Cypress）:
実際のユーザー操作を模倣して、アプリの動作を検証する。

テストを活用することで、開発の品質と効率を向上させることができます。
今後のプロジェクトで積極的に取り入れていきましょう！

SHARE

blog 関連記事

すべて見る