testを書いてみる about ifcjs-react

[ktaroabobon]

Reactのtest方法（公式）

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

大きく分けて２つ：

1. コンポーネントツリーのレンダー
   　- シンプルなテスト環境で行い、その結果を検証
2. アプリケーション全体の動作
   　- ブラウザ同等の環境で検証する（end2endテスト）

どちらかというと前者にフォーカスしたテストを紹介する

トレードオフ

• 実行速度 vs 環境の現実度
• モックの粒度

推奨ツール

• Jest
• React Testting Library

リンク

公式：https://ja.reactjs.org/docs/testing.html

[ktaroabobon]

参考になりそうなリンク一覧

• https://zenn.dev/iamtillmans/articles/171f41fbd03c89
• https://reffect.co.jp/react/react-test
• https://ja.reactjs.org/docs/testing-recipes.html
• https://ja.reactjs.org/docs/testing-environments.html

[ktaroabobon]

環境構築

• https://zenn.dev/longbridge/articles/9e9758181c8846

yarn add --dev jest
yarn add --dev @types/jest
yarn add --dev ts-jest

@testing-library/react
React コンポーネントテストのためのユーティリティライブラリーです。
@testing-library/jest-dom
Jest のマッチャーを拡張するユーティリティライブラリーです。
@testing-library/user-event
実際のイベントをシミュレートするためのユーティリティライブラリーです。
@testing-library/react-hooks
React が提供する Hooks テストのためのユーティリティライブラリーです。

yarn add --dev @testing-library/react
yarn add --dev @testing-library/jest-dom
yarn add --dev @testing-library/user-event
yarn add --dev @testing-library/react-hooks
yarn add --dev jest-environment-jsdom

[ktaroabobon]

ts-jestで外部ライブラリがimportできない
-> babelを使う

yarn add --dev babel-jest @babel/core @babel/preset-env
yarn add --dev @babel/preset-typescript

• babel.config.jsを作成する

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

参考

• https://media-massage.net/blog/ts-jest%E3%81%8C%E5%A4%96%E9%83%A8%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92import%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE%E5%87%A6%E6%96%B9/
• https://jestjs.io/ja/docs/getting-started#babel-%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B