https://zenn.dev/nus3/articles/jest-react-testing-library

最近、Zenn に全然(?)記事書けてないなぁっていうのと、フロントエンドのテスト大事やなぁと感じることが多かったので、React + Testing Library + Jest の覚書を雑に書くことにした

(特定の用途で覚書まとめたら、この内容だったら Zenn にも出せるやんか、とかそんなことがあったわけでは断じてない)

JavaScript のテストフレームワークである Jest について

• Create React App(以下:CRA)ではテストランナーに Jest を採用している
• CRA での Jest のコンフィグのベースは下記の実装を確認する
• CRA の場合はテストを実行する前のセットアップの設定を追加したい場合はsrc/setupTests.jsに追加する
  • 素の Jest を使う場合はjest.setup.jsみたいなセットアップファイルを作成し、jest.config.js などの config ファイルのsetupFilesAfterEnv にセットアップファイルを指定する

Jest での transformer の話

• Jest は実装されたコードを JavaScript として実行するが、Node.js でサポートされていない JSX, TypeScript, Vue テンプレートなどの構文を使う場合はプレーンな JavaScript にトランスパイルする必要がある
• この Node.js でサポートされていない構文に対応するために transform 機能がある
  • CRA ではここら辺が該当の実装
  • babel-jest + babel-preset-react-app を採用してる

この transform を利用して実装されている JSX や TypeScript をトランスパイルしている

Jest の transformer には ts-jest や babel-jest、@swc/jest、esbuild-jest などがある

test.todo, test.each, test.only

Jest の test には便利なメソッドがある

• test.todo()

  • このメソッドを使うことで、実装予定のテストを TODO として残せる

• test.each()

  • 同じテストケースを異なるテストデータを使ってテストしたい場合に使える

  test.each([
    { title: "nus3", value: "3" },
    { title: "nus4", value: "4" },
    { title: "nus5", value: "5" },
  ])(
    "$title の場合", // ${name}でtest.eachで渡したオブジェクトのプロパティの値をここでも使える
    ({ test, value }) => {
      // test.eachオブジェクトの配列分ののテストが実行できる
    }
  );
  
  

Testing Library について

Testing Library は実際に対象のコンポーンエントをユーザーが操作してるようなテストを書くためのテストユーティリティ

コンポーネントのテスト方法