私は react-testing-library の初心者です。Enzyme でコンポーネントをテストしてもうまくいかなかったため、さまざまな「Getting Started」ドキュメントやブログ記事を読み始めました。私が見つけた例のほとんどは、「react-testing-library の紹介」ブログ投稿コンポーネント自体が次のような要素で構成されているものをテストする方法の例を見たいです。他のComposedComponentコンポーネントは、React の最も優れた点の 1 つであるため、コンポーネントと呼ばれます (この SO の投稿では、適切な名前がないため、そのような例を挙げます)。
Enzymeで のテストを書いたときComposedComponented、正しい props が some に渡されたことをアサートしChildComponent、 がChildComponent独自のテストを持っていることを信頼するだけで、ChildComponentのテスト内で実際に DOM にレンダリングされたものComposedComponentを気にする必要がありませんでした。しかし react-testing-library では、「レンダリングされた react コンポーネントのインスタンスを扱うのではなく、実際の DOM ノードでテストが機能する」ため、 とのChildComponent関係に応じて がレンダリングする DOM ノードについてアサーションを行うことでの動作もテストする必要があるComposedComponentのではないかと心配しています。つまり、React アプリケーションのコンポーネント階層の上位に行くほど、テストがより長く、より徹底的になるということです。私の質問の要点は次のとおりです。他のコンポーネントを子として持つコンポーネントの動作を、その子コンポーネントの動作をテストせずにテストするにはどうすればよいでしょうか?
私は、単に想像力の欠如に苦しんでいるだけであり、Enzyme の代わりとして非常に人気を集めているこのライブラリを適切に使用する方法を誰かが教えてくれることを心から願っています。
ベストアンサー1
他の (すでにテスト済みの) コンポーネントをレンダリングするコンポーネントをテストするときに私が行うことは、それらのコンポーネントをモックすることです。たとえば、テキスト、ボタン、モーダルを表示するコンポーネントがあります。モーダル自体はすでにテスト済みなので、再度テストする必要はありません。
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { ComponentUnderTest } from '.';
// Mock implementation of a sub component of the component being tested
jest.mock('../Modals/ModalComponent', () => {
return {
__esModule: true,
// the "default export"
default: ({ isOpen, onButtonPress }) =>
isOpen && (
// Add a `testid` data attribute so it is easy to target the "modal's" close button
<button data-testid="close" onClick={onButtonPress} type="button" />
),
};
});
describe('Test', () => {
// Whatever tests you need/want
});