web-dev-qa-db-ja.com

他のコンポーネントで構成されるコンポーネントをreact-testing-libraryでテストする方法は？

私は、反応テストライブラリにまったく新しいです。 Enzymeでのコンポーネントのテストに成功しなかった後に見つけたさまざまな「Getting Started」ドキュメントとブログ投稿をすべて読み始めたところです。私が見つけることができるほとんどの例は、 "react-testing-libraryの紹介"ブログ投稿 の例のように、かなり単純です。それ自体がotherコンポーネントで構成されているコンポーネントをテストする方法の例を参照してください。コンポーネントの構成はReact（このSO postより適切な名前がないため、そのようなComposedComponentの例を呼び出します）。

EnzymeでComposedComponentedのテストを作成したとき、正しいプロップが一部のChildComponentに渡されたと断言でき、ChildComponentには独自のテストがあり、 ChildComponentのテストでComposedComponentが実際にDOMにレンダリングされる内容に注意する必要があります。しかし、react-testing-libraryを使用すると、「レンダリングされたreactコンポーネントのインスタンスを処理するのではなく、実際のDOMノードでテストが機能する」ため、ChildComponentの動作もテストする必要があります。 ComposedComponentとの関係に応じてレンダリングするDOMノードに関するアサーションを作成します。つまり、Reactアプリケーションのコンポーネント階層の上位に行くほど、テストが長くて完全になります。私の質問の要点は次のとおりです：他のコンポーネントを子として持つコンポーネントの動作を、それらの子コンポーネントの動作をテストせずにテストするにはどうすればよいですか？

私が想像力の欠如に苦しんでいるだけで、酵素の代わりとしてこのようなフォロワーを獲得したこのライブラリを適切に使用する方法を誰かが私に理解してくれることを本当に望んでいます。

reactjsreact-testing-library
5
peterlawless

他の（すでにテスト済みの）コンポーネントをレンダリングするコンポーネントをテストするときに私がやっていることは、それらを模擬することです。たとえば、テキスト、ボタン、モーダルを表示するコンポーネントがあります。モーダル自体はすでにテストされているので、もう一度テストしたくありません。

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
});
2
Drew Reese