テストの種類
Unitテスト
コンポーネント単位のテスト、親のコンポーネントが使われている場合は親コンポーネントをモック化して切り離してテストします。（擬似的な関数やpropsを受け取るようにします。）
使えるライブラリ
以下どちらかの組み合わせで行うのが一般的です。
- Jest + React-Testing-Library
- Jest + Enzyme
Integrationテスト
Reduxのストアにアクセスしながらコンポーネントをテストします。
E2Eテスト(end to end)
ブラウザがアプリケーションを操作しているようなテストを行います。
使えるツール
- cypress.io
テストライブラリの種類
Jest
テストランナーとしてテストに関わる基本的な機能を提供してくれます。
なお、React公式が推奨しているテストライブラリなので「react-create-app」とかをインストールするとデフォルトで入っています。
React-Testing-Library
- 2018年にリリースされました。
- Enzymeに取って代わるライブラリです。
- ユーザー視点でテストを行います。
- なお、React公式が推奨しているテストライブラリなので「react-create-app」とかをインストールするとデフォルトで入っています。
Enzyme
- 2015年にリリースされました。
- コンポーネントの内部を詳細にテストしたい場合に使うのでUnitテストに向いています。
- Hooks(useEffectなど)のテストと相性が悪いです。
cypress.io(サイプレス）
ReactのE2Eテストツールとしてよく使われています。
本記事はcypress10.1.0にて検証しています。(9以前とは結構書き方が変わっていますので注意しましょう。）
インストール
|
1 |
yarn add -D cypress |
package.jsonに起動コマンドを追加
|
1 2 3 4 |
"scripts": { "cy:open": "cypress open", "cy:run": "cypress run" }, |
cypress open
初回起動時はこれで起動することで設定ファイルなどを自動生成することができます。
また、実際にブラウザ上で動きを見ながらE2Eテストを実行することができます。
cypress run
コマンドライン上でE2Eテストをバックグラウンドで実行してくれます。
ターミナルで以下のコマンドを実行
|
1 |
yarn cypress |
そうするとcypressの設定ファイルなどが自動生成されます。
設定
cypress/e2e/(任意のファイル名).spec.cy.ts
任意のファイルを作ります。以下のような記述をします。
|
1 2 3 4 5 6 7 8 9 10 11 |
describe("empty spec", () => { // 以下はitを実行する前に共通で実行する処理になります。 beforeEach(() => { cy.visit("http://localhost:3000"); }); it("passes", () => { cy.get('[id="player"]').should("be.visible"); }); }); export {}; // TypeScriptの場合これがないとエラーになります。 |
実行方法
- Next.jsのローカルサーバーを事前に起動しておく。（Next.jsであれば「yarn dev」など）
- 「yarn cypress」でcypress起動
- cypressのUI上の「Specs」の「(任意のファイル名).spec.cy.ts」をクリックし、実行します。
この記事へのコメントはありません。