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

Question

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

当我在 Enzyme 中为 CompositedComponented 编写测试时，我可以断言正确的 props 已传递给某个 ChildComponent 并信任该 ChildComponent > 有它自己的测试，我不必关心 ChildComponent 在我的 CompositedComponent 测试中实际渲染到 DOM 的内容。但是对于react-testing-library，我担心“你的测试将使用实际的DOM节点，而不是处理渲染的react组件的实例”，我还必须测试 ChildComponent 通过对其渲染的 DOM 节点做出断言，以响应其与 CompositedComponent 的关系。这意味着我在 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
});