【結合テスト】Authコンポーネント（認証周り）

Web開発ソフトウェアテスト徹底攻略 (React Hooks/Redux + Django REST API) @udemy

準備

1. 必要ライブラリ・モジュールのインポート

作成したテスト用ファイルに以下をインポートする
```
/** 外部import */
import React from "react";
import { render, screen, cleanup } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { rest } from "msw";
import { setupServer } from "msw/node";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";

/** 内部import */
// authSlice.reducerをauthReducerという名でimport
import authReducer from "../features/authSlice";
// testを行うコンポーネント
import { Auth } from "../components/Auth";
```
- userEvent：ユーザーによるボタンクリックやタイピングといった動作をシミュレーションするためのもの
- rest：APIをモッキングするモジュール（REST API専用はrest）
  
  <aside> 🌿 【モッキング】
  
  テストのスピードと信頼性を高めるために、実際の外部サービスや内部サービスの代わりをする、偽のサービスを作成すること。
  
  実装をテストするときに、オブジェクトの関数や振る舞いではなくプロパティが必要となる場合、モックを使用できる。
  
  </aside>
- setupServer：サーバーをセットアップする
- Provider, configureStore：今回はreduxのstoreを動かしながらインテグレーションテスト（結合テスト）を行うため、これらも必要

2. ページ遷移（useNavigate）のモック関数の作成

本件のAuthコンポーネントでは、react-router-domのuseNavigateを使って、ログイン後のページ遷移を実装していたので、そのモック関数を作成する

作成したテスト用ファイルに、jestの関数を使ってmockedNavigatorを作成する

/** 外部import */
import React from "react";
import { render, screen, cleanup } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { rest } from "msw";
import { setupServer } from "msw/node";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";

/** 内部import */
// authSlice.reducerをauthReducerという名でimport
import authReducer from "../features/authSlice";
// testを行うコンポーネント
import { Auth } from "../components/Auth";

// react-routerのuseNavigateのモック関数
**const mockedNavigator = jest.fn();**

jest.fn()はダミーの関数なので、実際には何の処理も走らないが、mockedNavigatorメソッドが呼び出されているか否かをテストできる

続けて、Authコンポーネント内に記述したreact-router-domのuseNavigate によるページ遷移先を上書きする

〜〜〜

// react-routerのuseNavigateのモック関数
const mockedNavigator = jest.fn();

// Authコンポーネント内のuseNavigateによるページ遷移先を上書き
**jest.mock("react-router-dom", () => ({
	...jest.requireActual('react-router-dom'),
	useNavigate: () => mockedNavigator,
}));**

▼jest.requireActual(moduleName)

Jestオブジェクト · Jest

モックの作成完了！

3. 擬似的なAPIのエンドポイントの作成（msw使用）& サーバーの作成

本件のAuthコンポーネントでは、以下2種のエンドポイントにアクセスしている

APIのauthとAPIのcreateで、トークンを取得するエンドポイント
ユーザーを新規作成するエンドポイント

これらをモックしたエンドポイントを作成する

作成したテスト用ファイルに、以下のようなモックしたエンドポイントを作成する

〜〜〜

// Authコンポーネント内のuseNavigateによるページ遷移先を上書き
****jest.mock("react-router-dom", () => ({
	...jest.requireActual('react-router-dom'),
	useNavigate: () => mockedNavigator,
}));

// mswを使った、擬似的なAPIのエンドポイントの作成
**const handlers = [
  rest.post("<http://localhost:8000/api/auth/>", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ token: "abc123" }));
  }),
  rest.post("<http://localhost:8000/api/create/>", (req, res, ctx) => {
		// 新規作成に成功した際は201
    return res(ctx.status(201));
  }),
];**

上記のように複数のエンドポイントがある場合は、handlersの中に配列形式で記述することができる

続けて、handlers を使ってサーバーを作成する

〜〜〜

// mswを使った、擬似的なAPIのエンドポイントの作成
const handlers = [
  rest.post("<http://localhost:8000/api/auth/>", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ token: "abc123" }));
  }),
  rest.post("<http://localhost:8000/api/create/>", (req, res, ctx) => {
		// 新規作成に成功した際は201
    return res(ctx.status(201));
  }),
];

// サーバーの作成（mock server walkerの作成）
// エンドポイントが複数あるため、...で展開している
**const server = setupServer(...handlers);**

準備

1. 必要ライブラリ・モジュールのインポート

2. ページ遷移（useNavigate）のモック関数の作成

3. 擬似的なAPIのエンドポイントの作成（msw使用）& サーバーの作成

4. テスティング（テストケース）の設定