インストールとテスト実行
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;