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

<aside> 🌿 【あっちをみてね】

• 要素表示
• 一覧表示
• 削除
• 更新

上記は以下と同じ内容なのでそちらをみてね

【結合テスト】Brandコンポーネント（非同期処理でコンテンツ取得・CRUD操作 etc…）

</aside>

▼コンポーネントイメージ

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

準備

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

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 */
   // vehicleSlice.reducerをvehicleReducerという名でimport
   import vehicleReducer from "../features/vehicleSlice";
   // testを行うコンポーネント
   import { Vehicle } from "../components/Vehicle";
   // Vehicleコンポーネントで使うコンポーネント
   import { Brand } from "../components/Brand";
   import { Segment } from "../components/Segment";
   

   • userEvent：ユーザーによるボタンクリックやタイピングといった動作をシミュレーションするためのもの

   • rest：APIをモッキングするモジュール（REST API専用はrest）

     <aside> 🌿 【モッキング】

     テストのスピードと信頼性を高めるために、実際の外部サービスや内部サービスの代わりをする、偽のサービスを作成すること。

     実装をテストするときに、オブジェクトの関数や振る舞いではなくプロパティが必要となる場合、モックを使用できる。

     </aside>

   • setupServer：サーバーをセットアップする

   • Provider, configureStore：今回はreduxのstoreを動かしながらインテグレーションテスト（結合テスト）を行うため、これらも必要

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

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

• Vehicle一覧を取得するエンドポイント
• postメソッドでVehicleを新規作成するエンドポイント
• putメソッドでVehicleを更新するエンドポイント
• deleteメソッドでVehicleを削除するエンドポイント
  • 選択したVehicleの削除にあわせて、紐付いているSegmentとBrandも削除
    • deleteメソッドでSegmentを削除するエンドポイント
    • deleteメソッドでBrandを削除するエンドポイント

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

そのほか、SegmentsとBrandsのデータも使ってセレクトボックスを実装している都合上、以下2種のエンドポイントもモックで作成する

• Brands一覧を取得するエンドポイント
• Segments一覧を取得するエンドポイント