如何为给定React Header组件编写简单的Jest测试用例

目前React生态中普遍使用Jest配合React Testing Library编写组件测试，也是React官方推荐的测试组合，如果你是用Create React App创建的项目，相关依赖已经预装，不需要额外安装。

第一步：创建测试文件 #

在Header组件同级目录下新建Header.test.jsx文件。

第二步：编写测试代码 #

以下是完整测试代码，覆盖了该组件核心的渲染逻辑校验：

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

// mock样式文件，测试不需要加载CSS避免不必要的报错
jest.mock('./styles/Header.css');

describe('Header 组件测试', () => {
  // 测试1：组件正常渲染不崩溃
  it('组件可以正常挂载渲染', () => {
    render(<Header />);
    // header标签对应的默认ARIA role为banner
    expect(screen.getByRole('banner')).toBeInTheDocument();
  });

  // 测试2：标题文本正确渲染
  it('正确渲染标题为Header Component', () => {
    render(<Header />);
    const title = screen.getByRole('heading', {
      name: /header component/i,
      level: 5
    });
    expect(title).toBeInTheDocument();
  });

  // 测试3：所有导航链接正常渲染
  it('导航栏所有链接文本正确显示', () => {
    render(<Header />);
    const expectedLinks = ['Home', 'About', 'Gallary', 'FAQs', 'Contact Us'];
    expectedLinks.forEach(linkText => {
      expect(screen.getByRole('link', { name: linkText })).toBeInTheDocument();
    });
    // 额外校验Home链接的高亮类名是否正确
    expect(screen.getByRole('link', { name: 'Home' })).toHaveClass('link-secondary');
  });

  // 测试4：搜索框属性符合预期
  it('搜索框正常渲染且属性正确', () => {
    render(<Header />);
    const searchInput = screen.getByRole('searchbox');
    expect(searchInput).toBeInTheDocument();
    expect(searchInput).toHaveAttribute('placeholder', 'Search');
    expect(searchInput).toHaveAttribute('aria-label', 'Search');
  });
})

补充说明 #

1. 如果你需要测试交互逻辑，比如搜索框输入、链接点击，可以引入@testing-library/user-event模拟用户操作，比如测试搜索框输入的用例如下：

import userEvent from '@testing-library/user-event';

it('搜索框可以正常输入内容', async () => {
  const user = userEvent.setup();
  render(<Header />);
  const searchInput = screen.getByRole('searchbox');
  await user.type(searchInput, '测试内容');
  expect(searchInput).toHaveValue('测试内容');
});

2. 你提供的组件代码里，搜索框用了class属性而不是React要求的className，实际运行会抛出警告，建议修改。
3. 运行测试直接执行npm test（npm用户）或者yarn test（yarn用户）即可看到测试结果。

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