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;