Open5

Next.jsアプリケーションでの自動テストについてのメモ

KeitaUenishiKeitaUenishi

自動テストについて、実装を通して理解した部分を個人的にメモ

KeitaUenishiKeitaUenishi

JestとReact Testing Libraryの役割

##Jest

Jest は jsdom を通じて DOM にアクセスできる JavaScript のテストランナーです。jsdom はブラウザの模倣環境にすぎませんが、React コンポーネントをテストするのには十分なことが多いです。Jest は モジュール や タイマー のモックのような機能を組み合わせて、高速にイテレーションを回すことができ、コードをどう実行するかをよりコントロールできます。

https://ja.legacy.reactjs.org/docs/testing.html

React Testing Library

React Testing Library は実装の詳細に依存せずに React コンポーネントをテストすることができるツールセットです。このアプローチはリファクタリングを容易にし、さらにアクセシビリティのベスト・プラクティスへと手向けてくれます。コンポーネントを children 抜きに「浅く」レンダーする方法は提供していませんが、Jest のようなテストランナーで モック することで可能です。

https://ja.legacy.reactjs.org/docs/testing.html

ChatGPTにも聞いてみた

JestとReact Testing Libraryは互いに補完し合う関係にあります。
Jestはテストの実行環境を提供し、テストの実行、アサーション、モッキングなどを担当します。
React Testing LibraryはJestの上で動作し、Reactコンポーネントのテストに特化したユーティリティを提供します。
一般的に、React Testing LibraryはJestと組み合わせて使用されることが多いです。Jestはテストの基本的な機能を提供し、React Testing LibraryはReact特有のテストに焦点を当てた機能を提供するという形です。

KeitaUenishiKeitaUenishi

Jestでのテスト

describe('my function or component', () => {
  test('does the following', () => {

  });
});

describeブロック → 「テストスイート」
testブロック → 「テストケース」

testは「it」と書かれることもある（意味は同義）

テストスイートは複数のテストケースを持つが、テストケースは必ずしもテストスイートに含まれるわけではない。

KeitaUenishiKeitaUenishi

beforeAllやらの役割ざっくりメモ

// beforeAll テストファイルの前に一度だけ実行
beforeAll(() => server.listen());

// beforeEach ファイル内のテスト開始前に実行される
beforeEach(() => console.log("beforeEach"));

// afterEach ファイル内のテストが完了するたびに実行される
afterEach(() => server.resetHandlers());

// afterAll テストファイルの最後に一度だけ実行
afterAll(() => server.close());