昨今はtypescriptを使うのが当たり前ですのでtsに対応したjestを導入
|
1 |
npm i -D jest @types/jest ts-jest |
追加パッケージ
npm i -D jest-environment-jsdom @testing-library/react @testing-library/jest-dom @testing-library/user-event
jest-environment-jsdom
UIコンポーネントを表示したり操作したりするためのDOM APIを提供するテスト環境をセットアップするライブラリです。
@testing-library/react
React用のテスティングライブラリです。テスティングライブラリ自体はAngularやVueなどReact以外にもあるのですが、Reactに特化したカスタマイズがされています。
@testing-library/jest-dom
UIコンポーネント用のマッチャー拡張です。Jestのデフォルトのマッチャー関数に加えてUIコンポーネントテストに便利な追加のマッチャー関数が使えるようになります。
@testing-library/user-event
テストの際にユーザー操作をシミュレートするためのライブラリです。よりリアルに近い形でテストを行うことができます。
Jestの設定
まずは以下のコマンドを実行してjest.config.jsを作成します。
|
1 |
npx ts-jest config:init |
中身をesmodule記法に書き換えます。（viteはesmoduleを使用しているため。）
|
1 2 3 4 5 |
export default { preset: 'ts-jest', testEnvironment: 'jest-environment-jsdom', setupFilesAfterEnv: ["./jest.setup.ts"] }; |
また、UIコンポーネントテストの場合はnodeではなくDOM上でテストを行いたいので、テストの実行環境もnodeではなく先ほどインストールした「jest-environment-jsdom」を指定します。
tsconfig.json
commonjs記法上で、esModule記法でもエラーが出ないようにesModuleInteropを有効にしておきます。また、@testing-library/jest-domのバージョンアップで型エラーが出る場合があるのでtypesの指定もしておきます。
|
1 2 3 |
"compilerOptions": { "esModuleInterop":true "types": ["@testing-library/jest-dom"] |
jest.setup.ts
Jestのマッチャー関数を拡張するテスティングライブラリをjest-domにも設定が必要になります。
|
1 |
import "@testing-library/jest-dom"; |
jest.config.jsでこのファイルを読み込むことによる全てのテストファイルでJestの拡張マッチャーが使えるようになります。
package.json
testコマンドにjestを追加します。
|
1 2 |
"scripts": { "test": "jest", |
この記事へのコメントはありません。