実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ

こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使

[shingo-sasaki-0529]

未だにコンポーネントの単体テストで何を見るべきかとかコスパにどう折り合い付けるかみたいな納得感を得られてなくて本格的に手を出せてない。Storybook のインタラクティブテストがあれば良くない？ってなっちゃう。

[Kesin]

これはいいjestの教材

[mizdra]

こういうまとめ欲しかった。良い記事。

[cowbee]

テストに取り組んだときに引っかかったり、後になってこうすればよかったのか‥ってポイントが纏まってて良き

[Pasta-K]

具体例まとまってて便利

[kkeisuke]

Storybook

[teppeis]

Jest, Testing Library, MSWを使ったReactコンポーネントやフックのテストの具体例

[Shisama]

Jest、testing-library、MSWなどを使ったテストの書き方の紹介。日付の表示のテスト、キーボード操作のテスト、HTTPリクエストを含むテスト、ローディングの表示のテストなどのテストの例が紹介されている。