カテゴリ一ブログ開発構築

2024-04-30 #React #Vitest

こんにちは。

ギークフィードでエンジニアをやっているNkawaKです。

バックエンドのテストコードは書いたことはあっても、

フロントエンドのテストコードは経験がない方も少なくないのではないでしょうか。

本記事ではVitestというモダンなテストフレームワークを使って、

フロントエンドのテスト環境の構築やテストコードの書き方を解説していきますので、

これからフロントエンドのテストに入門する方の参考にしていただければと思います。

1 テスト環境の構築
2 フロントエンドのテストコードを書く
3 APIをモック化する
4 Vitest UIとカバレッジレポート
5 まとめ

テスト環境の構築

まずはViteを使ってReactのプロジェクトを作成していきましょう。

yarn create vite react-test

1	yarn create vite react-test

Select a framework: › React

1	Select a framework: › React

Select a variant: › TypeScript + SWC

1	Select a variant: › TypeScript + SWC

これでReactのプロジェクトが作成できました。

これからの作業はこのディレクトリで行っていきます。

今回は↓のような、よくあるログインフォームをサンプルにテストしてみましょう。

このフォームは以下のコンポーネントからできています。
 See the Pen <a href="https://codepen.io/nkawak/pen/wvZOOaO"> Untitled</a> by NkawaK (<a href="https://codepen.io/nkawak">@nkawak</a>) on <a href="https://codepen.io">CodePen</a>.

See the Pen <a href="https://codepen.io/nkawak/pen/qBwvvbP"> Untitled</a> by NkawaK (<a href="https://codepen.io/nkawak">@nkawak</a>) on <a href="https://codepen.io">CodePen</a>.

メールアドレスとパスワードをuseStateで管理し、そのデータをログインボタンのイベントでAPIに送信します。

API側ではメールアドレスとパスワードでユーザーを検索して、ユーザーが見つかったらレスポンスとして返します。

以上の処理が正常に完了したら、取得したデータのユーザー名をフォーム上に表示します。

次はこのコンポーネントをテストするための環境を構築していきましょう。

以下のコマンドを実行してテストに必要なライブラリをインストールします。

yarn add -D jsdom vitest @vitest/coverage-v8 @vitest/ui

1	yarn add -D jsdom vitest @vitest/coverage-v8 @vitest/ui

yarn add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event

1	yarn add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event

ライブラリのインストールが完了したら、Vitestの設定をしていきましょう。

vite.config.tsを以下のように編集します。

// Vitestの型を追加する
/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from "vite";
import { configDefaults } from "vitest/config";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
　　　　　　　　// テストに関するAPIをグローバルに設定
    globals: true,
    // テスト環境の設定
    environment: "jsdom",
    // テストの設定ファイル
    setupFiles: "./src/test/setup.ts",
　　　　　　　　// CSSファイルを処理する
    css: true,
    // テストのカバレッジを出力する設定
    coverage: {
      // @vitest/coverage-v8を設定
      provider: "v8",
      exclude: [
        ...(configDefaults.coverage.exclude as string[]),
        "src/test",
        "src/main.tsx",
      ],
    },
  },
});

// Vitestの型を追加する

/// <reference types="vitest" />

/// <reference types="vite/client" />

import { defineConfig } from "vite";

import { configDefaults } from "vitest/config";

import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/

export default defineConfig({

plugins: [react()],

test: {

　　　　　　　　// テストに関するAPIをグローバルに設定

globals: true,

// テスト環境の設定

environment: "jsdom",

// テストの設定ファイル

setupFiles: "./src/test/setup.ts",

　　　　　　　　// CSSファイルを処理する

css: true,

// テストのカバレッジを出力する設定

coverage: {

// @vitest/coverage-v8を設定

provider: "v8",

exclude: [

...(configDefaults.coverage.exclude as string[]),

"src/test",

"src/main.tsx",

});

次にpackage.jsonにテスト用のスクリプトを追加します。

"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "test": "vitest",
    "test:ui": "vitest --ui",
    "coverage": "vitest run --coverage"
},

"scripts": {

"dev": "vite",

"build": "tsc && vite build",

"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",

"preview": "vite preview",

"test": "vitest",

"test:ui": "vitest --ui",

"coverage": "vitest run --coverage"

次にテストの設定ファイルを配置するディレクトリを作成し、そこにsetup.tsを配置します。

mkdir src/test

1	mkdir src/test

import '@testing-library/jest-dom';

1	import '@testing-library/jest-dom';

この時点ではsetup.tsに、importを一行追加するだけで大丈夫です。

最後にtsconfig.jsonでVitestでよく使うAPIの型を、あらかじめimportしておきます。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    "types": ["vitest/globals"],
    ...

{

"compilerOptions": {

"target": "ES2020",

"useDefineForClassFields": true,

"lib": ["ES2020", "DOM", "DOM.Iterable"],

"module": "ESNext",

"skipLibCheck": true,

"types": ["vitest/globals"],

...

以上でVitestのテスト環境を構築することができました。
では実際にテストコードを書いていきましょう。

フロントエンドのテストコードを書く

src/testにApp.test.tsxを新規作成します。

import App from "../App";
import { render, screen } from "@testing-library/react";

describe(App, () => {
  test("ログインフォームが表示されている", async () => {
    render(<App />);
    expect(screen.getByText("ログイン")).toBeInTheDocument();
    expect(screen.getByText("メールアドレス")).toBeInTheDocument();
    expect(screen.getByText("パスワード")).toBeInTheDocument();
    expect(screen.getByText("ログインする")).toBeInTheDocument();

    expect(screen.getByRole("textbox")).toBeTruthy();
    expect(screen.getByRole("button")).toBeTruthy();

    expect(screen.getByLabelText("メールアドレス")).toBeTruthy();
    expect(screen.getByLabelText("パスワード")).toBeTruthy();
  });
});

import App from "../App";

import { render, screen } from "@testing-library/react";

describe(App, () => {

test("ログインフォームが表示されている", async () => {

render(<App />);

expect(screen.getByText("ログイン")).toBeInTheDocument();

expect(screen.getByText("メールアドレス")).toBeInTheDocument();

expect(screen.getByText("パスワード")).toBeInTheDocument();

expect(screen.getByText("ログインする")).toBeInTheDocument();

expect(screen.getByRole("textbox")).toBeTruthy();

expect(screen.getByRole("button")).toBeTruthy();

expect(screen.getByLabelText("メールアドレス")).toBeTruthy();

expect(screen.getByLabelText("パスワード")).toBeTruthy();

});

まずはログインフォームが正常に表示されているかのテストをしていきましょう。

ファイルのトップレベルでdescribeというAPIを実行します。
describeは文字列か関数を第一引数に指定し、第二引数のコールバック関数の中にテストケースを書いていきます。
第一引数の文字列か関数名が、describeの中に記述する複数のテストをまとめるグループ名となります。

次にtestというAPIを実行して、テストを定義します。

テストケースを書いていく前に、renderでテストをするコンポーネントをレンダリングする必要があります。

getByTextで引数に指定された文字列が含まれる要素を取得し、

expect(screen.getByText("ログイン")).toBeInTheDocument();

1	expect(screen.getByText("ログイン")).toBeInTheDocument();

toBeInTheDocumentでその要素がドキュメントの中に存在しているかを確認しています。

getByRoleでは引数で指定したロールを持つ、要素を取得することができます。

expect(screen.getByRole("textbox")).toBeTruthy();

1	expect(screen.getByRole("textbox")).toBeTruthy();

このロールはAccessible Rich Internet Applications (ARIA)を参照しています。

https://momdo.github.io/html-aria/#allowed-descendants-of-aria-roles

getByLabelTextは引数の文字列を含むラベルに紐づいた要素を取得します。

expect(screen.getByLabelText("パスワード")).toBeTruthy();

1	expect(screen.getByLabelText("パスワード")).toBeTruthy();

type=”password”のinputはgetByRoleでは取得できないので、このメソッドを使用しています。

これら以外にも、getByTestIdというメソッドが頻出です。

このメソッドではid属性ではなく、data-testidという属性から要素を取得することに注意が必要です。

getByRoleとgetByLabelTextで取得した要素が存在しているかをtoBeTruthyで確認しています。

expect(screen.getByRole("textbox")).toBeTruthy();

1	expect(screen.getByRole("textbox")).toBeTruthy();

要素が取得できなかった場合は結果はfalsyとなるので、期待する要素が存在するかを確認できます。

ではこのテストコードをyarn testで実行してみましょう。

テストが成功したことを確認できました。

次は入力フォームが動作しているかのテストをしていきましょう。

以下のテストを追加します。

import App from "../App";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event"; // 追加

describe(App, () => {
  ...
  test("メールアドレスが入力できる", async () => {
    render(<App />);
    const user = userEvent.setup();
    const mailForm = screen.getByLabelText("メールアドレス");
    await user.type(mailForm, "test@example.com");
    expect(mailForm).toHaveValue("test@example.com");
  });

  test("パスワードが入力できる", async () => {
    render(<App />);
    const user = userEvent.setup();
    const passwordForm = screen.getByLabelText("パスワード");
    await user.type(passwordForm, "userTest1234");
    expect(passwordForm).toHaveValue("userTest1234");
  });
});

import App from "../App";

import { render, screen } from "@testing-library/react";

import userEvent from "@testing-library/user-event"; // 追加

describe(App, () => {

...

test("メールアドレスが入力できる", async () => {

render(<App />);

const user = userEvent.setup();

const mailForm = screen.getByLabelText("メールアドレス");

await user.type(mailForm, "test@example.com");

expect(mailForm).toHaveValue("test@example.com");

});

test("パスワードが入力できる", async () => {

render(<App />);

const user = userEvent.setup();

const passwordForm = screen.getByLabelText("パスワード");

await user.type(passwordForm, "userTest1234");

expect(passwordForm).toHaveValue("userTest1234");

});

テストコード上でフォームの入力やクリックなどのイベントを発生させる場合は、userEventを使用します。

イベントを起こす前にsetupで準備する必要があります。

先ほど紹介したgetByLabelTextでフォームの要素を取得します。

取得した要素に文字を入力する場合はtypeを実行します。

typeの第一引数には入力を行う要素を、第二引数には入力する文字列を指定します。

またtypeは非同期で実行されるのでawaitで処理の完了を待機しています。

フォームに入力された値をtoHaveValueで確認します。

新しく追加したテストも成功しました。

以上のテスト結果から、期待したテキストが画面に含まれていることと

フォームが正常に動作していることが分かりました。

次にAPIと連携している部分をテストします。

APIをモック化する

最後にログイン処理をテストしましょう。

const submit = async () => {
  const response = await fetch("https://XXXXXXX/signin", {
    method: "POST",
    body: JSON.stringify({ mail, password }),
  });
  const body = await response.json();
  body && setUserData(body);
};

const submit = async () => {

const response = await fetch("https://XXXXXXX/signin", {

method: "POST",

body: JSON.stringify({ mail, password }),

});

const body = await response.json();

body && setUserData(body);

};

この処理はAPIとやりとりを行いますが、テスト環境では外部のAPIと連携することができません。

ではどうやってテストするかというと、APIの部分をモック化することで解決します。

APIのモック化はmswというライブラリを使います。

yarn add -D msw

1	yarn add -D msw

ライブラリをインストールしたらsrc/test/にmocksというディレクトリを作成します。

mkdir src/test/mocks

1	mkdir src/test/mocks

このディレクトリでhandlers.tsというファイルを作成します。

import { HttpResponse, http } from "msw";

export const handlers = [
  http.post("https://XXXXXXX/signin", async ({ request }) => {
    const { mail, password } = (await request.json()) as {
      mail?: string;
      password?: string;
    };
    if (mail === "test@example.com" && password === "userTest1234") {
      return HttpResponse.json(
        {
          id: "1",
          name: "testUser",
          mail: "test@example.com",
        },
        { status: 200 }
      );
    } else {
      return HttpResponse.json(null, { status: 404 });
    }
  }),
];

import { HttpResponse, http } from "msw";

export const handlers = [

http.post("https://XXXXXXX/signin", async ({ request }) => {

const { mail, password } = (await request.json()) as {

mail?: string;

password?: string;

};

if (mail === "test@example.com" && password === "userTest1234") {

return HttpResponse.json(

{

id: "1",

name: "testUser",

mail: "test@example.com",

{ status: 200 }

);

} else {

return HttpResponse.json(null, { status: 404 });

}

}),

];

handlersの配列の中でモックAPIの動作を定義します。

テスト環境では”https://XXXXXXX/signin”に”test@example.com”と”userTest1234″がPOSTされた場合に、
ステータスコード200とユーザーデータのオブジェクトを返し、それ以外では404エラーを返すようにしました。

次はsrc/test/にserver.tsというファイルを作成します。

import { setupServer } from "msw/node";
import { handlers } from "./handlers";

export const APIServer = setupServer(...handlers);

import { setupServer } from "msw/node";

import { handlers } from "./handlers";

export const APIServer = setupServer(...handlers);

setupServerに先ほど作成したhandlersの配列を渡すことで、サーバーとして機能してくれます。

最後にsrc/test/setup.tsを以下のように編集します。

import "@testing-library/jest-dom";

import { APIServer } from "./mocks/server";

beforeAll(() => APIServer.listen());
afterAll(() => APIServer.close());
afterEach(() => APIServer.resetHandlers());

import "@testing-library/jest-dom";

import { APIServer } from "./mocks/server";

beforeAll(() => APIServer.listen());

afterAll(() => APIServer.close());

afterEach(() => APIServer.resetHandlers());

setupServerで作成したサーバーをテストする際に、どのように動作させるかを定義しています。

beforeAllはdescribe内の最初のテストが始まる前に実行するコールバック関数を登録し、

テスト前にサーバーを待機状態にしています。

afterAllはdescribe内の最後のテストが終了した際に実行する関数を登録し、

テスト後にサーバーを終了させています。

afterEachはdescribe内の各テストが終わる毎に実行する関数を登録し、

テスト毎にリクエストハンドラをリセットしています。

モックAPIの準備ができたので、App.test.tsxに以下のテストコードを追加します。

describe(App, () => {
  ...
  test("ログインができる", async () => {
    render();
    const user = userEvent.setup();

    const mailForm = screen.getByLabelText("メールアドレス");
    const passwordForm = screen.getByLabelText("パスワード");
    const sendButton = screen.getByRole("button");

    await user.type(mailForm, "test@example.com");
    await user.type(passwordForm, "userTest1234");
    await user.click(sendButton);
    
    expect(screen.getByText("Welcome testUser !")).toBeInTheDocument();
  });
});

describe(App, () => {

...

test("ログインができる", async () => {

render();

const user = userEvent.setup();

const mailForm = screen.getByLabelText("メールアドレス");

const passwordForm = screen.getByLabelText("パスワード");

const sendButton = screen.getByRole("button");

await user.type(mailForm, "test@example.com");

await user.type(passwordForm, "userTest1234");

await user.click(sendButton);

expect(screen.getByText("Welcome testUser !")).toBeInTheDocument();

});

setupでイベントの準備を行い、getByで要素を取得します。
typeからフォームにメールアドレスとパスワードを入力して、
clickでログインボタンをクリックしてAPIにフォームの情報を送信します。

これらの処理が正常に実行できていれば、画面上に”Welcome testUser !”と表示されるはずです。
テストを実行して確認してみましょう。

最後に追加したテストも成功しました。モック化したAPIも正常に動作しています。

すべてのテストが成功したことで、このコンポーネントは期待通りに動作していることが分かりました。

Vitest UIとカバレッジレポート

テスト環境を構築する際にpackage.jsonに以下のスクリプトも追加していました。

"test:ui": "vitest --ui",
"coverage": "vitest run --coverage"

1 2	"test:ui": "vitest --ui", "coverage": "vitest run --coverage"

これらのVitestのオプションも見ておきましょう。

yarn test:uiを実行するとテスト結果をUIで確認することができます。

テストの結果をダッシュボードとして出力したり、左のファイル名をクリックすると、

各テストのより詳しい情報を確認することができます。

実際のアプリではもっと多くのテストコードが書かれるので、便利なUIがあるのはありがたいですね。

yarn coverageを実行するとテストのカバレッジ(網羅率)が表示されます。

このレポートを見れば、どのコンポーネントがテストできていないのか一目でわかりますね。

またカバレッジテストの後、/coverageにレポートのHTMLページが作成されます。

このディレクトリの中にあるindex.htmlを開くと、ブラウザ上でより詳しくレポートの確認ができます。

File列のリンクから、各コンポーネントのテスト状況を個別に確認することもできます。

以上のように、Vitestには便利なオプションがあるので、テストの際に活用してみるのも良いでしょう。

まとめ

Vitestのテスト環境を構築する際はvite.config.tsにテストの設定を追加する
テストコードのトップレベルでdescribeを実行し、その中でテストを定義する
getByから始まるメソッドで要素を取得し、expectのメソッドで取得した要素の確認を行うことができる
入力やクリックなどのイベントはuserEventで発生させることができる
mswというライブラリを使って、APIをモック化することができる
Vitestにはテスト結果をUIやカバレッジレポートとしても出力させることができる

Vitestによるフロントエンドのテスト解説は以上になります。

皆さまがテストコードを書くときの参考になれば幸いです。

この記事を書いた人
最近の記事

NkawaK

JavaScript/TypeScriptが好きなエンジニア。フロントエンドに関する記事を投稿していきます。

NkawaK (全て見る)

【採用情報】一緒に働く仲間を募集しています

2024-04-30 #React #Vitest

【React】フロントエンドのテストコードを書いてみよう【Vitest】

テスト環境の構築

フロントエンドのテストコードを書く

APIをモック化する

Vitest UIとカバレッジレポート

まとめ

【採用情報】一緒に働く仲間を募集しています

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索

【React】フロントエンドのテストコードを書いてみよう【Vitest】

テスト環境の構築

フロントエンドのテストコードを書く

APIをモック化する

Vitest UIとカバレッジレポート

まとめ

【採用情報】一緒に働く仲間を募集しています

関連投稿

Remix SPAモードで静的WebサイトをGithub Pagesにデプロイする

LangGraph入門！LLMアプリ開発ライブラリのQuick StartをAmazon Bedrockでやってみる

AWS Step Functionsの基本を再学習しました

AWS ChatbotでSlackからAmazon Bedrock Agentにアクセスしてみる

AWS Builder Cards：楽しみながらAWSを学ぶカードゲーム

電子工作で自作した植物の自動水やり機から土壌データをAWS IoT Coreに連携してみた

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索