Jestを試してみる

インストールとテスト実行
テストを書いてみる
コンポーネントをテストする

インストールとテスト実行

Jestを使ったことがなかったので、create-react-appを使って簡単に試してみたメモ書き。

プロジェクトの作成。

$ npx create-react-app try-jest --template typescript
$ cd try-jest
$ code .

App.tsx に対するテスト App.test.tsx が既に存在している。

ターミナルからテストを実行。

$ yarn test

ウォッチモードで実行されるので、aを選ぶ。

テストが成功する。

App コンポーネントに表示される文字列を変更してみる。テストの期待値を修正。

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

ウォッチモードのため、ファイルの保存と同時にテストが実行され、失敗する。

App.tsx を以下のように修正して保存するとテストが再実行されてpassする。

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div>
          Hello World
        </div>
      </header>
    </div>
  );
}

export default App;

テストを書いてみる

テスト対象の関数を用意する。

const greeting = (name: string): string => {
  return "";
}
export default greeting;

テストケースを記述する。

import greeting from "./greeting";

describe("greeting:", () => {
  const result = greeting("Taro");
  expect(result).toBe("Hello, Taro");
});

失敗する。

関数を正しく実装する。

const greeting = (name: string): string => {
  return `Hello, ${name}`;
}
export default greeting

これでテストがpassするはず…だが、 Your test suite must contain at least one test. というエラーが出てしまった。
describe じゃなくて it を使うように修正したら解消してpassした。

import greeting from "./greeting";

it("greeting:", () => {
  const result = greeting("Taro");
  expect(result).toBe("Hello, Taro");
});

コンポーネントをテストする

挨拶を表示するコンポーネント DisplayGreeting のガラを作る。

import { FC } from "react";

const DisplayGreeting: FC<{ name: string }> = ({ name }) => {
  return (
    <>
    </>
  );
}

export default DisplayGreeting;

App.test.tsx に倣ってテストケースを記述。

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

test('DisplayGreeting renders correct', () => {
  render(<DisplayGreeting name="Taro" />);
  const elem = screen.getByText(/Hello, Taro/i);
  expect(elem).toBeInTheDocument();
});

テストが失敗する。

DisplayGreeting.tsx を以下のように実装し、テストが通ることを確認。

import { FC } from "react";
import greeting from "./greeting";

const DisplayGreeting: FC<{ name: string }> = ({ name }) => {
  return (
    <>
      {greeting(name)}
    </>
  );
}

export default DisplayGreeting;