目次
概要
今回のブログポストではViteを使って生成したTypeScriptベースのReactプロジェクトにテスト環境を構築する方法について説明します。また、JestとReact Testing Libraryを使ってテストコードを書く方法についても説明します。
ブログシリーズ
このブログポストはシリーズで制作されました。以下はViteのシリーズリストです。
- [Vite] TypeScript ベースの React プロジェクトを始める
- [Vite] TypeScript ベース React プロジェクトへテスト環境を構築する
- [Vite] TypeScript ベース React プロジェクトに Prettier を追加する
- [Vite] TypeScript ベース React プロジェクトでに Stylelint(CSS-in-JS)を追加する
Jest のインストール
Jestは Facebook によって作られたテストフレームワークで、Reactプロジェクトで最もよく使われるテストフレームワークです。Jestを使うとJavaScriptに対するテストコードを書いて実行することができます。
Viteを使って生成したTypeScriptベースReactプロジェクトにJestをインストールするには、次のコマンドを実行します。
npm i -D jest @types/jest ts-jest
# yarn add -D jest @types/jest ts-jest
jest:Jestをインストールします。@types/jest:Jestの型定義ファイルをインストールします。ts-jest:TypeScriptを使ってJestを実行できるようにサポートするパッケージです。
Testing Libarary のインストール
React Testing LibraryはReactコンポーネントをテストするためのライブラリです。React Testing Libraryを使うとReactコンポーネントのレンダリング結果を検証したり、イベントを発生させるなどのテストを書くことができます。
Viteを使って生成したTypeScriptベースReactプロジェクトにReact Testing Libraryをインストールするには、次のコマンドを実行します。
npm i -D jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-svg-transformer identity-obj-proxy
# yarn add -D jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event jest-svg-transformer identity-obj-proxy
jest-environment-jsdom:Jestでjsdom環境を使うためのパッケージです。@testing-library/react:React Testing Libraryをインストールします。@testing-library/jest-dom:JestでReact Testing Libraryを使うためのパッケージです。@testing-library/user-event:React Testing Libraryでイベントを発生させるためのパッケージです。jest-svg-transformer:JestでSVGファイルを使えるようにサポートするパッケージです。identity-obj-proxy:CSS Moduleを使う場合、JestでCSS Moduleを使えるようにサポートするパッケージです。
Jest の基本設定
Jestを使ってTypeScriptベースReactプロジェクトをテストするためには、Jestを設定する必要があります。次のコマンドを実行して、ルートディレクトリで次のコマンドを実行してJestの設定ファイルを作成します。
npx ts-jest config:init
# yarn ts-jest config:init
すると、ルートディレクトリにJestの設定ファイルであるjest.config.jsファイルが作成されることを確認できます。ファイルを開くと次のような内容が確認できます。
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
};
Viteを使って生成したプロジェクトはデフォルトでES Modulesがモジュールシステムになっているため、module.export(CommonJS モジュールシステム)をexport default(ES Modules モジュールシステム)に変更する必要があります。
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
preset: 'ts-jest',
testEnvironment: 'node',
};
またCommonJSとES modulesの違いによりテストを実行する時に警告が発生する可能性があるため、これを防ぐためにtsconfig.jsonファイルを開いて次のようにesModuleInteropオプションを設定します。
{
...
"compilerOptions": {
"esModuleInterop": true,
...
},
...
}
jest-environment-jsdom の設定
Jestの基本テスト環境は次のようにnodeに設定されています。
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
preset: 'ts-jest',
testEnvironment: 'node',
};
しかし、ReactテストはDOM環境で実行する必要があるため、次のようにjest-environment-jsdomを使用するように設定する必要があります。
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
preset: 'ts-jest',
testEnvironment: 'jest-environment-jsdom',
};
React Testing Library の設定
React Testing Libraryを使ってReactコンポーネントをテストするためには、React Testing Libraryが提供するJest用Matchersを使用できるように設定する必要があります。
React Testing Libraryが提供するJest用Matchersを設定するために、ルートディレクトリにjest.setup.tsファイルを作成し、次のように@testing-library/jest-domをimportします。
import '@testing-library/jest-dom';
この後、jest.config.jsファイルを再度開いて、次のようにsetupFilesAfterEnvオプションを追加します。
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
preset: 'ts-jest',
testEnvironment: 'node',
setupFilesAfterEnv: ['./jest.setup.ts'],
};
JestのテストファイルでReact Testing LibraryのMatchersのタイプを使用できるようにするために、tsconfig.jsonファイルを開いて、次のようにtypesオプションを追加します。
{
...
"compilerOptions": {
"esModuleInterop": true,
"types": ["@testing-library/jest-dom"],
...
},
...
}
CSS と SVG ファイルの設定
CSSファイルとSVGファイルをJestで使用できるようにするために、jest.config.jsファイルに次のようにmoduleNameMapperオプションを追加する必要があります。
/** @type {import('ts-jest').JestConfigWithTsJest} */
export default {
preset: 'ts-jest',
testEnvironment: 'jest-environment-jsdom',
setupFilesAfterEnv: ['./jest.setup.ts'],
moduleNameMapper: {
'^.+\\.svg$': 'jest-svg-transformer',
'\\.(css|less|scss)$': 'identity-obj-proxy',
},
};
Jest の実行
これでJestとReact Testing Libraryを使用してTypeScriptベースのReactプロジェクトをテストする準備が整いました。Jestを使用してテストを実行できるようにするために、package.jsonファイルを開いて、次のように変更します。
"scripts": {
...
"test": "jest --watchAll",
"test:ci": "jest --ci"
},
修正が完了したら、次のコマンドを実行してJestを実行します。
npm run test
# yarn test
すると、次のようにJestが正常に実行されることが確認できます。
No tests found, exiting with code 0
Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
現在はテストコードを作成したないのでNo tests foundというメッセージが表示されることを確認できます。
テストコード作成
JestとReact Testing Libraryを使用してTypeScriptベースのReactプロジェクトでテストコードを作成する方法について説明します。JestとReact Testing Libraryを使用してテストコードを作成するために、srcディレクトリにApp.test.tsxファイルを作成して次のように変更します。
import { render, screen } from '@testing-library/react';
import App from './App';
describe('<App />', () => {
it('Rendered well', async () => {
const { container } = render(<App />);
expect(screen.getByAltText('Vite logo')).toBeInTheDocument();
expect(screen.getByAltText('React logo')).toBeInTheDocument();
expect(screen.getByText('Vite + React')).toBeInTheDocument();
expect(container).toMatchSnapshot();
});
});
JestとReact Testing Libraryを使用してViteロゴとReactロゴ、そしてVite + Reactテキストが正しくレンダリングされるかどうかを確認するテストコードを作成しました。
作成したテストを実行するため、ターミナルで次のコマンドを実行してテストを実行します。
npm run test
# yarn test
すると、次のようにテスト結果が表示されることを確認できます。
PASS src/App.test.tsx
<App />
✓ Rendered well (20 ms)
› 1 snapshot written.
Snapshot Summary
› 1 snapshot written from 1 test suite.
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 1 written, 1 total
Time: 1.749 s, estimated 2 s
Ran all test suites.
Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
また、toMatchSnapshotを使ってスナップショットテストを作成したため、__snapshots__ディレクトリにスナップショットファイルが作成されることを確認できます。
完了
これでViteを使って生成したTypeScriptベースのReactプロジェクトにテスト環境を構築する方法について説明しました。JestとReact Testing Libraryを使用してテストコードを作成して、安全で安定したReactプロジェクトを開発してください。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
