如何使用 react-testing-library 测试由其他组件组成的组件？

Question

我对 react-testing-library 完全陌生。在使用 Enzyme 测试组件没有成功后，我才开始阅读我能找到的所有各种“入门”文档和博客文章。我能找到的大多数示例都非常简单，例如 "Introducing the react-testing-library" blog post 中的示例。我想看看如何测试一个由 other 组件组成的组件的示例，因为组件组合是 React 最伟大的事情之一（在这篇 SO 帖子中，我将称之为这样的示例ComposedComponent 没有更好的名字）。

当我在 Enzyme 中为 ComposedComponented 编写测试时，我可以断言正确的 props 传递给了一些 ChildComponent 并相信 ChildComponent 有自己的测试，我不必关心什么在我对ComposedComponent 的测试中，ChildComponent 实际上呈现到了 DOM。但是对于 react-testing-library，我担心因为“而不是处理渲染的 react 组件的实例，您的测试将与实际的 DOM 节点一起工作”，我还必须通过断言来测试 ChildComponent 的行为它呈现的 DOM 节点以响应其与 ComposedComponent 的关系。这意味着我在 React 应用程序的组件层次结构中越往上走，我的测试就会变得越长越详尽。我的问题的要点是：如何在不测试这些子组件的行为的情况下测试具有其他子组件的组件的行为？

我真的希望我只是缺乏想象力，有人可以帮助我弄清楚如何正确使用这个作为 Enzyme 的替代品而获得如此多追随者的库。

Answer 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
});