Reactjs 如何使用react测试库测试由其他组件组成的组件？

我是全新的反应测试库。我刚刚开始阅读各种各样的“入门”文档和博客文章，在我用酶测试一个组件没有成功之后，我可以找到它们。我能找到的大多数例子都很简单，就像在。我想看看如何测试由其他组件组成的组件的例子，因为组件组成是React最重要的事情之一（在这篇文章中，我将调用这样一个

ComposedComponent

的例子，因为没有更好的名称）

当我为酶中的

成分编写测试时，我可以断言正确的道具被传递给了一些
ChildComponent
，并且相信
ChildComponent
有自己的测试，我不必担心
ChildComponent
在我的
ComposedComponent
测试中实际呈现给DOM的是什么。但对于react测试库，我担心的是，因为“您的测试将使用实际的DOM节点，而不是处理呈现的react组件的实例”，我还必须测试
ChildComponent
的行为，方法是根据它与
ComposedComponent
的关系，断言它呈现的DOM节点。这意味着我在React应用程序中的组件层次结构越高，我的测试就越长、越详尽。我的问题的要点是：如何在不测试这些子组件的行为的情况下测试具有其他子组件的组件的行为？

我真的希望我只是在遭受想象的失败，有人能帮我弄清楚如何正确使用这个库，它已经获得了一个酶的替代品。
当测试碰巧呈现其他（已经测试过的）组件的组件时，我所做的是模仿它们。例如，我有一个显示一些文本、按钮和模式的组件。模态本身已经测试过了，所以我不想再测试一次

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

从“React”导入React；
从'@testing library/react'导入{render，firevent}；
从“”导入{ComponentUnderTest}；
//正在测试的组件的子组件的模拟实现
jest.mock（'../Modals/ModalComponent'，（）=>{
返回{
__艾斯莫杜勒：没错，
//“默认导出”
默认值：（{isOpen，onButtonPress}）=>
等参(
//添加一个`testid`数据属性，这样就可以轻松地定位“model”的“close”按钮
),
};
});
描述（'测试'，（）=>{
//你需要/想要的任何测试
});
这很好，有没有任何软件包可以很好地公开这一点？我已经读了一些，我理解为什么没有。jest.mock被提升到文件的顶部，因此除了字符串文本或闭包之外，您不能在jest.mock的第一个或第二个参数中使用任何东西，在助手库中只剩下很少的工作，并且在测试文件中留下非常困难的代码。感谢回复@drewrese，我忘了回来更新状态了。如果我们使用传统的函数声明（而不是箭头函数），函数名将用作
displayName
，lint不会抱怨：）@BrunoMonteiro谢谢，这是一个很好的信息。@BrunoMonteiro很奇怪，刚才在研究另一个问题时，我在参考文献中遇到了这个问题：它基本上描述了命名的相同内容。