如何测试React组件是否渲染自定义子组件？现有测试方案失效

针对你遇到的ComponentA返回ComponentB但测试断言ComponentB调用次数失败的问题，以下是两种可行的解决方案：

方法一：用Jest模拟组件并断言调用次数 #

通过jest.mock模拟自定义组件，让Jest跟踪其调用情况，直接断言调用次数：

ComponentA.tsx 示例代码 #

import ComponentB from './ComponentB';

export default function ComponentA() {
  return <ComponentB />;
}

测试用例 ComponentA.test.tsx #

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

// 模拟ComponentB，返回带测试ID的元素（方便调试，也可返回空元素）
jest.mock('./ComponentB', () => {
  return jest.fn(() => <div data-testid="component-b" />);
});

describe('ComponentA', () => {
  it('渲染ComponentB一次', () => {
    render(<ComponentA />);
    // 断言ComponentB被调用1次
    expect(ComponentB).toHaveBeenCalledTimes(1);
  });
});

注意：如果不模拟ComponentB，Jest无法跟踪组件的调用次数，这是之前测试失败的核心原因。

方法二：通过测试ID验证组件存在（推荐） #

React Testing Library更推荐测试用户可见的行为而非内部实现，可给ComponentB添加测试ID，再查询其是否存在：

给ComponentB添加测试ID #

// ComponentB.tsx
export default function ComponentB() {
  return <div data-testid="component-b">ComponentB内容</div>;
}

测试用例 #

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

describe('ComponentA', () => {
  it('正确渲染ComponentB', () => {
    render(<ComponentA />);
    // 断言ComponentB对应的元素存在于DOM中
    expect(screen.getByTestId('component-b')).toBeInTheDocument();
  });
});

关于waitFor假通过的问题 #

你之前用waitFor包裹断言看似通过，本质是因为waitFor会等待超时时间（默认1000ms），如果期间没有触发失败断言，就会默认通过，但实际上组件可能并未正确渲染，属于假阳性结果。这类同步渲染的场景不需要用waitFor，直接同步断言即可。

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