React-testing-libfrary + Jest のテスト環境構築手順

はじめに

react-testing-library(以下 RTL)は、React コンポーネントをテストするためのテストライブラリの 1 つです。

Jest と組み合わせて使用することによって真価を発揮します。

環境構築

では早速、これらのテストライブラリを使用するための環境を作っていきましょう。

まず、CRA(create-react-app)から簡単なテンプレートを用意してください

npx create-react-app rtl-jest-sample

ちょっと時間かかると思います。終わったら依存関係をまとめてインストールしましょう。

npm i -D  @babel/preset-env @babel/preset-react jest @testing-library/react @types/jest @testing-library/jest-dom @testing-library/dom babel-jest @testing-library/user-event jest-css-modules

そして、jest を適用させるために package.json に設定を書いていきます

    "jest": {
        "testPathIgnorePatterns": [
            "<rootDir>/.next/",
            "<rootDir>/node_modules/"
        ],
        "moduleNameMapper": {
            "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
        }
    }

scripts にも、test ランナーコマンドを追記しておきましょう（既存の test コマンドが存在する場合差し替えてください）

    "scripts": {
        ...
        "test": "jest --env=jsdom --verbose"
    },

babel を使って変換しておかないとエラーが発生してしまうので、ルートに .babelrc 　ファイルを作成し以下の presets を書きます。

{
  "presets": [
    "@babel/preset-env", "@babel/preset-react"
  ]
}

これでテストの環境構築が終わりです。

テスト実行

では早速テスト実行・・・と行きたいところですが、まず App.js ファイルをテストするわけですから、それを書き換える必要がありますよね。

import React from "react";

const App = () => {
  return <div>Hello World</div>;
};

export default App;

こんなかんじで、単純な文字列を返すようにするとやりやすいと思います。

では、App.test.js を開いてください。

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";
import App from "./App";

it("Should render the defualt text", () => {
  render(<App />);
  expect(screen.getByText("Hello World")).toBeInTheDocument();
});

これが今回使うテストコードになります。流れとしましては、App コンポーネントをレンダーし、"Hello World"という文字列がその中に存在するか、というテストになっています。

では実行しましょう。

ターミナルを開いて、先ほど追加した test コマンドを実行しましょう。

npm run test

するとこのように PASS と表示されたのではないでしょうか。

 PASS  src/App.test.js (14.83 s)
  √ Should render the defualt text (385 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        24.102 s
Ran all test suites.

FAIL された場合は、コードを見直してください

まとめ

いかがだったでしょうか

このように、RTL を用いるとわかりやすく、スムーズにテストすることができます。

この手法は、React 公式が推奨しているやり方でもあるのでこれからは Enzyme よりこちらを使っていくほうがよいでしょう。