React中如何通过渲染App父组件测试Header传入的subComponent是否正常展示

方案1：直接测试全链路渲染（集成测试） #

直接渲染App组件，查询SubComponentButton实际渲染出的元素即可，适合验证整条渲染链路正常：

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

test('App 传递给 Header 的 subComponent 可正常渲染', () => {
  render(<App />);
  // 这里的查询条件替换为你 SubComponentButton 实际渲染出的元素特征即可
  expect(screen.getByRole('button', { name: /sub component button 对应文本/i })).toBeInTheDocument();
});

方案2：Mock 子组件做隔离测试 #

如果不想依赖SubComponentButton的内部实现，可mock该组件自定义渲染内容，再验证结果：

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

// Mock SubComponentButton 组件
jest.mock('./SubComponentButton', () => {
  return function MockSubComponentButton() {
    return <button>Mock Sub Component</button>;
  };
});

test('App 传递给 Header 的 subComponent 可正常渲染', () => {
  render(<App />);
  expect(screen.getByRole('button', { name: /mock sub/i })).toHaveTextContent('Mock Sub Component');
});

方案3：Mock Header 组件验证Prop传递 #

如果只需要验证App组件正确传递subComponent属性给Header，不需要管Header的渲染逻辑，可以直接mock Header组件，校验接收的参数：

// App.test.tsx
import { render } from '@testing-library/react';
import App from './App';
import Header from './Header';

// Mock Header 组件
jest.mock('./Header', () => ({
  __esModule: true,
  default: jest.fn(() => <div>Mock Header</div>)
}));

test('App 正确给 Header 传递 subComponent 属性', () => {
  render(<App />);
  expect(Header).toHaveBeenCalledWith(
    expect.objectContaining({
      subComponent: expect.anything()
    }),
    expect.anything()
  );
});

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