如何测试子组件的子组件？附Modal组件嵌套测试场景

嘿，针对这种多层嵌套的前端组件测试，其实用React Testing Library（目前前端圈最推荐的组件测试工具之一）就能很优雅地搞定，不用硬啃DOM层级的嵌套关系。下面给你几个实用的方案，按推荐程度排序：

1. 优先按功能/用户可见内容定位（最推荐） #

React Testing Library的核心思路是模拟用户真实操作逻辑，所以优先通过组件的文本、角色或者可访问性属性来定位，完全不用关心它嵌套了多少层。

比如你提到的第二个Button（绑定了addNewPeriod点击事件的那个），如果它有明确的文本（比如“添加新周期”），直接用getByText就能精准定位：

import { render, screen, fireEvent } from '@testing-library/react';
import Modal from './Modal';

test('测试嵌套的添加按钮状态与点击行为', () => {
  // 渲染Modal组件，传入所需props
  render(<Modal disableButtons={false} />);
  
  // 通过按钮文本定位
  const addButton = screen.getByText('添加新周期');
  
  // 断言按钮是否可用
  expect(addButton).not.toBeDisabled();
  
  // 模拟用户点击按钮
  fireEvent.click(addButton);
  
  // 后续可以断言`addNewPeriod`是否被触发（需要结合jest的mock功能）
});

如果按钮没有显示文本，也可以通过getByRole结合名称描述来定位：

// 用模糊匹配的方式，不区分大小写
const addButton = screen.getByRole('button', { name: /添加新周期/i });

2. 使用测试ID定位（折中方案） #

如果组件没有合适的可访问性属性或显示文本，给目标组件加个data-testid是个靠谱的折中方案——这个属性专门给测试用，不会影响生产环境的渲染效果：

首先在你的Button组件上添加测试ID：

<Button 
  mini 
  htmlType="button" 
  onClick={this.addNewPeriod} 
  disabled={disableButtons}
  data-testid="add-new-period-button"
>
  添加新周期
</Button>

然后在测试代码里通过getByTestId定位：

const addButton = screen.getByTestId('add-new-period-button');
expect(addButton).toBeInTheDocument(); // 断言按钮存在

3. 按DOM层级定位（不推荐，仅应急用） #

如果以上方法都没法用，才考虑通过DOM层级逐步定位，但这种方式非常脆弱——只要组件的嵌套结构稍微调整，测试就会失败，所以尽量避免：

import { render } from '@testing-library/react';
import Modal from './Modal';

test('通过DOM层级定位嵌套按钮', () => {
  const { container } = render(<Modal disableButtons={false} />);
  
  // 逐层查找：Modal → FlexContainer → FlexRow → 第二个FlexColumn → Button
  const addButton = container.querySelector('FlexRow')
    .querySelectorAll('FlexColumn')[1]
    .querySelector('Button');
  
  expect(addButton).toBeEnabled();
});

4. 测试事件回调逻辑 #

如果需要验证点击按钮是否正确触发了addNewPeriod方法，可以用Jest的mock功能来监听：

情况1：addNewPeriod是Modal的props #

test('点击按钮触发addNewPeriod回调', () => {
  // 创建一个mock函数
  const mockAddNewPeriod = jest.fn();
  
  // 将mock函数作为props传入Modal
  render(<Modal disableButtons={false} addNewPeriod={mockAddNewPeriod} />);
  
  const addButton = screen.getByText('添加新周期');
  fireEvent.click(addButton);
  
  // 断言mock函数被调用了一次
  expect(mockAddNewPeriod).toHaveBeenCalledTimes(1);
});

情况2：addNewPeriod是Modal内部的方法 #

test('点击按钮触发内部的addNewPeriod方法', () => {
  // 用jest.spyOn监听Modal原型上的addNewPeriod方法
  const spyAddNewPeriod = jest.spyOn(Modal.prototype, 'addNewPeriod');
  
  render(<Modal disableButtons={false} />);
  
  const addButton = screen.getByText('添加新周期');
  fireEvent.click(addButton);
  
  // 断言方法被调用
  expect(spyAddNewPeriod).toHaveBeenCalled();
  
  // 记得清除spy
  spyAddNewPeriod.mockRestore();
});

内容的提问来源于stack exchange，提问作者Leff