如何使用Jest编写Tab组件onChange事件的单元测试用例？

我们需要覆盖两个核心测试场景：一是组件接收不同value时正确渲染对应选中状态的标签，二是点击标签时正确触发handleChange回调并传递参数。

测试环境准备 #

确保已安装必要的测试依赖：

npm install --save-dev @testing-library/react @testing-library/jest-dom jest

具体测试用例 #

创建TabComponent.test.tsx文件，编写以下测试代码：

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

// 模拟测试用的标签数据
const mockTabData = [
  { name: '标签1' },
  { name: '标签2' },
  { name: '标签3' },
];

describe('TabComponent', () => {
  // 测试初始渲染选中指定value对应的标签
  it('初始渲染时选中props传入value对应的标签', () => {
    render(<TabComponent value={1} Data={mockTabData} handleChange={() => {}} />);
    
    const tabs = screen.getAllByTestId('childtab');
    // 验证索引为1的标签处于选中状态
    expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
    // 验证其他标签未被选中
    expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
    expect(tabs[2]).toHaveAttribute('aria-selected', 'false');
  });

  // 测试点击标签触发handleChange并传递正确参数
  it('点击标签时调用handleChange并传递正确的newValue', () => {
    const mockHandleChange = jest.fn();
    render(<TabComponent value={0} Data={mockTabData} handleChange={mockHandleChange} />);
    
    const secondTab = screen.getAllByTestId('childtab')[1];
    fireEvent.click(secondTab);
    
    // 验证回调被调用一次，且第二个参数为选中标签的索引1
    expect(mockHandleChange).toHaveBeenCalledTimes(1);
    expect(mockHandleChange).toHaveBeenCalledWith(expect.any(Object), 1);
  });

  // 测试props的value变化时，组件更新选中标签
  it('当props的value变化时，组件自动更新选中的标签', () => {
    const { rerender } = render(<TabComponent value={0} Data={mockTabData} handleChange={() => {}} />);
    
    let tabs = screen.getAllByTestId('childtab');
    expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
    
    // 重新传入value=2，验证选中状态更新
    rerender(<TabComponent value={2} Data={mockTabData} handleChange={() => {}} />);
    
    tabs = screen.getAllByTestId('childtab');
    expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
    expect(tabs[0]).toHaveAttribute('aria-selected', 'false');
  });
});

测试要点说明 #

• 用jest.fn()模拟handleChange回调，方便验证调用次数和参数
• 通过data-testid定位标签元素，避免依赖易变的文本内容
• 用fireEvent.click模拟用户点击标签的交互行为
• 利用rerender测试props变化时的组件更新逻辑
• 验证aria-selected属性判断选中状态（Ant Design Tabs组件默认用该属性标记选中项）

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