Jestでテストを自動化する

Jestとは？

meta(Facebook)製のテスト用のjavascriptフレームワーク。

UIテストを自動化

テストの目的

• DOMの出力が期待通りであるか
• コードの変更前後でDOMの出力に差分が発生していないか（スナップショットテスト）

スナップショットテスト

パッケージをインストール

まず、react-test-rendererというパッケージをインストールする。

npm install --dev react-test-renderer

テストファイルを作成

test/example.test.js

test/example.test.js

import React from "react";
import renderer from "react-test-renderer";
import App from "../App";

it("Page snapshot testing", () => {
  const component = renderer.create(<App />);
  expect(component).toMatchSnapshot();
});

テストを実行

npm test

ユニットテスト

ユニットテスト用にLinkコンポーネントを作る。

src/Link.js

import React from "react";

export const Link = (props) => {
  retrun (
    <a
     href="http://reactjs.org"
     target="_brank"
     rel="noopener noreferrer"
    >
      {props.text || "No contents"}
    </a>
  );
};

App.jsも変更

src/App.js

import React from "react";
import logo from "./logo.svg";
import Link from "./Link";
import "./App.css";

export const App = () => {
  retrun (
    <div className="App">
      <header>
        <img src={logo} className="App-logo" alt="logo" />
        <Link text="Learn React" />
      < /header>
    </div>
  );
};

テストコードの作成

Linkコンポーネントがpropsが渡されたときと渡されてない時でUIが変わる。
このパターンが正常に機能するかをテストする。

src/tests/Link.test.jsx

import React from "react";
import { render } from "react-dom";
import { act } from "react-dom/test-utils";
import Link from "./Link";

describe("Link component testing", () => {
  let container = null;
  container = document.createElement("div");
  document.body.appendChild(container);
  
  it("render", () => {
    // テストケース１
    act(() => {
      render(<Link />, container);
    });
    // propsが渡されない場合
    expect(container.textContent).toBe("No contents");

    // テストケース２
    act(() => {
      render(<Link />, container);
    });
    // propsが渡されない場合
    expect(container.textContent).toBe("this link");
  });
})

describe(name, fn)でテストのパッケージ化（ラップ）を行う。
act() Reactのテスト関数。render状態を表現する。

参考