jest-previewとTesting Playgroundを活用してJestのDOMテストを簡単に書けるようにしてみた

こんにちは！プロダクト開発チームのフロントエンドエンジニアの@uyas_tです！

トラーナでは現在ユニットテストにJestとReact Testing Libraryを利用してReactのコンポーネントテストを行っております。

Testing LibraryにはGuiding PrinciplesというTesting Libraryによるテストの指針があり、そこには

The more your tests resemble the way your software is used, the more confidence they can give you.

(テストがソフトウェアの使用方法に似ているほど、信頼性が高まります)

とあります。そして、こちらのページでは、上記の指針に基づいた要素の取得に利用するqueryの優先順位が記載されております。 testing-library.com

getByRole、getByLabelText、getByPlaceholderText、getByText、...etc

たくさんのqueryがありますが、自分が作ったコンポーネントにアクセスするにはどのqueryを利用すればいいか、というのは分かりにくいのではないでしょうか？

そこで！今回はjest-previewとTesting Playgroundをの2つを組合わせて

どのqueryを利用すれば要素にアクセスできるのか？

をすぐに分かるようにする方法をお伝えしようと思います！！

jest-previewとは

www.jest-preview.com

jest-domにレンダリングされた要素をブラウザで表示できるようにするライブラリになります。これを利用し、react-testing-libraryのrender関数によって描画された要素をブラウザに表示するようにします。

Testing Playgroundとは

chrome.google.com

ブラウザに出力された要素に対して、tesing-libraryのどのクエリを使えばアクセスできるかを教えてくれる拡張機能になります。公式ドキュメントにも紹介されているので安心して利用できるかと思います。

実際に利用してみる

まずは環境を作ります。Testing Playgroundの拡張機能は事前にインストールしておきましょう

npx create-react-app myapp

jest-previewをを導入します

npm install -D jest-preview npm-run-all

package.jsonにjest-previewを起動するためのscriptを追記します

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "node scripts/test.js",
    "eject": "react-scripts eject",
    "preview": "jest-preview",
    "test:preview": "npm-run-all -p test preview"
  },

※jest-previewにはcreate-react-app用の設定を読み込むコマンドがあるので、一度だけこちらを実行してください

www.jest-preview.com

npx jest-preview config-cra

src/App.test.jsファイルに以下を追記します

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

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
  preview.debug(); // 追加
});

npm run testを実行してみましょう！ブラウザ上にAppコンポーネントが表示されていると思います。

そして次に、Testing Playgroundをインストールしたブラウザで、「Learn React」の要素を調べてみましょう。

なんと！screen.getByText(/learn react/i);だけでなく、screen.getByRole('link', { name: /learn react/i})でも要素が取得できることがわかりました。

src/App.test.jsを編集して確かめてみましょう

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

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByRole('link', {  name: /learn react/i})
  expect(linkElement).toBeInTheDocument();
});

再実行してみれば、きちんと要素が取得され、テストが通っていることが確認できると思います。

最後に

jest-previewとTesting Playgroundを組み合わせれば、コンポーネントのユニットテストに必要な、要素の取得に使うクエリが簡単に作成できるようになります！また、jest-previewの設定を変更すれば、テストの失敗時のsnapshotをpreviewしてくれるので、デバッグにも活用できます。是非皆さんも試してみてください！