初心者用モダンソフトウェアテスト用語集

2022/11/01に公開約2,000字

Reactアプリケーションのテストの種類

ユニットテスト(単体テスト)

単体テスト。コンポーネント単体で行う。
(例)親のコンポーネントから関数などのPropsを渡されている場合に、モックを使い疑似的な関数、Propsを受け取るようにしてコンポーネント単体で切り離してテストを行えるようにする。

インテグレーションテスト(結合テスト)

結合テスト。複数のユニットが合わさった状態で動作するかを検証する。
(例)とあるコンポーネントがReduxのstoreのstateを呼び出していたり、dispatchを使いstateを更新している場合にReduxのstoreにアクセスしながらコンポーネントをテストする。

E2Eテスト

E2E=EndtoEndの略。
アプリケーションの動作が期待通りに行われ、ユーザーのタスクやプロセスが適切に行われているかを検証する。
Cypressがよく使われる。

現状React Testing LibraryJestの組み合わせの手法が一般的に使われている。

テスト駆動開発(TDD)

いわゆるテストファーストな開発手法。
まずテストコードを先に記述、その後テストをクリアするように実際のコードを書いていき、再度テストした際にきちんとパスするようにリファクタリングをしていく方法。

Testing Library

ReactだけでなくVueやSvelteでも利用可能。ReactではReact Testing Libraryが提供されている。(create-react-appで自動インストールされる)
コンポーネントの描画やクリックイベントなどのユーザーの操作、要素の取得などに利用される。
https://testing-library.com/

Jest

Facebook社がOSSとして開発を進めている、JavaScriptのユニットテストのためのテストフレームワーク。
Reactの標準テストフレームワークとして導入されている。
https://jestjs.io/ja/

Jest はあらゆる JavaScript のコードベースの正しさを保証するために設計された JavaScript テスティングフレームワークです。親しみやすく、豊富な機能を持つAPIによって簡単にテストを書くことができ、さらには素早く結果を得ることができます。

MSW(Mock Service Worker)

ネットワークレベルでAPIリクエストをインターセプトしてMockデータを返すことができるライブラリ。
バックエンドAPIを立てずにフロントエンドのみでAPIリクエストを含むテストや開発ができる。
https://mswjs.io/

beforeAll

テストファイルの最初の1回だけ実行させる。

// モックサーバーを呼び出す
beforeAll(()=> server.listen());

beforeEach

各テストケースが毎回呼び出される前に実行される。

beforeEach(()=>{
});

afterEach

各テストケースが毎回終わる度に実行される。

afterEach(()=>{
 server.resetHandlers();
 cleanup();
})

afterAll

テストファイルの最後の1回だけ実行させる。

// モックサーバーを閉じる
afterAll(()=> server.close());

学習に便利なリンク集

https://ja.reactjs.org/docs/testing-recipes.html
https://reffect.co.jp/react/react-test

※随時内容追加していきます。

Discussion

ログインするとコメントできます