問題タブ [testing-library]

私たちのプロジェクトには と の両方がenzymeありtesting-libraryます。私の目標は、getByTestIdをカスタムに上書きすることです。しかし、2 番目の構成を setup.test.js に追加すると、一部のテストが で失敗しFound multiple elements with the textます。

setup.test.js:

私のバージョン:

"酵素": "^3.11.0",

"@testing-library/react": "^11.0.4",

テストは比較的新しいので、これはおそらく非常に簡単です。

checkboxコンポーネントをテストしたい。it基本は理解しましたが、ブロック内で複数のコンポーネントをレンダリングするにはどうすればよいですか?

これまでの私のコード。複数のアイテムをレンダリングして 1 つをチェックする 2 番目のテストに行き詰まっています。それはその値を返すはずです（または、選択したチェックボックスをテストできます）。

コンポーネント自体は非常にシンプルです。ラベルとチェックボックス要素があり、期待されるすべての小道具を受け取ります。

ありがとうございました！

私のコンポーネント:

テストコード:

モックファイル ( __mocks__/firebase-shortcut.ts):

Jest 設定<project root>/jest.config.js:

コンポーネントの状態をconsole.log(render(...).component)で出力すると、それぞれの場合でloggedIn状態が正しく設定されていることが出力されます。しかし、 によって得られた実際のレンダリング結果は、何も更新されていません。'yes''no'render(...).container.innerHTML

さらに、Jest の出力で奇妙なエラーが出力されます。

loggedInの値をHTML出力に「印刷」しようとすると、

出力loggedInは「はい」または「いいえ」ですが、ifブランチは機能していないようです。

私が間違っていることはありますか？前もって感謝します。

ヘッダー (「タイプ」、「名前」) を持つ表形式のデータがあります。「名前」列のすべてのアイテムを選択して、検索文字列が含まれているかどうかを確認したいと思います。その列の各項目には、役割「gridcell」と説明「名前」があります。添付画像1を参照してください。

getByRole('gridcell', {description: /name/i})動作しません。クエリの typescript 宣言に目を通しましたが、何も役に立たないようです。どうすればこれを達成できますか？

インポートするだけcreate-react-appの名前のファイルを使用するプロジェクトで見ましたが、テストでは のような拡張バージョンを使用しているようです。setupTest.js@testing-library/jest-domexpect.toBeInTheDocument

同じファイル ( setupTest.js) をプロジェクトに追加しましたが、効果がないようです。

@testing-library/jest-domつまり、すべての.spec.tsファイルで行うのではなく、グローバルにインポートするにはどうすればよいでしょうか?