React Testing Library
React向けのTesting Library
doc: https://testing-library.com/react
repo: https://github.com/testing-library/react-testing-library
インストール
$ npm i -D @testing-library/react
$ npm i -D @testing-library/jest-dom
$ npm i -D @testing-library/user-event
clickとかtypeとかいろいろ使えるようになる
renderのdoc
https://testing-library.com/docs/react-testing-library/api
要素選択クエリのdoc
getBy*, queryBy*など
https://testing-library.com/docs/dom-testing-library/api-queries
jest-dom
DOMをテストするjestマッチャー
使用できるマッチャーの一覧
https://github.com/testing-library/jest-dom#custom-matchers
Testing Trophy
Reactのテスト方針 - Qiita
Testing Libraryの作者の考えが紹介されている
テストのピラミッドに以下が追加
static
unitの下に静的チェックされる
confidence coefficient
実装の詳細をテストせず、ユーザ目線でテストする
vs Enzymeって感じrmaruon.icon
data-testid
idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita
テスト用のカスタムデータ属性 (data-testid)をsrcに追加しておく
ビルド時にdata-testid属性が取り除かれるように設定する
https://testing-library.com/docs/dom-testing-library/api-queries#bytestid
Using data-testid attributes do not resemble how your software is used and should be avoided if possible.
公式的には非推奨
ref
React Testing Libraryの使い方 - Qiita
React Hooks Testing | Kumasan
React Testing Library の使い方 - Adwaysエンジニアブログ
#React