如何使用React Testing Library与Jest测试无返回值Void函数

这个函数的核心是根据传入的val过滤现有过滤器列表，再根据过滤结果更新两个状态变量。测试的关键是模拟它依赖的状态值和状态更新函数，验证逻辑是否符合预期。

核心思路 #

函数依赖三个外部值：selectedFilters（当前过滤器状态）、setSelectedFilters和setSelectedFiltersReqObject（两个状态更新函数）。我们可以用jest.fn()模拟这两个更新函数，再给selectedFilters设置不同的测试场景，逐一验证行为。

步骤1：重构函数（可选但推荐） #

如果groupReset是React组件内的函数，建议把它提取成独立工具函数，将依赖的参数显式传入，这样测试更简单：

// 重构后的函数
type FilterItem = { type: string; [key: string]: any };
export const groupReset = (
  val: string,
  selectedFilters: FilterItem[],
  setSelectedFilters: (filters: FilterItem[]) => void,
  setSelectedFiltersReqObject: (obj: undefined | any) => void
) => {
  const updatedFilters = selectedFilters.filter(filters => filters.type !== val);
  if (updatedFilters.length === 0) {
    setSelectedFilters([]);
    setSelectedFiltersReqObject(undefined);
  } else {
    setSelectedFilters(updatedFilters);
  }
};

步骤2：编写测试用例 #

用例1：过滤后仍有剩余过滤器 #

当过滤后还有其他过滤器时，只需要更新selectedFilters，不需要重置请求对象。

import { groupReset } from './your-file-path';

describe('groupReset', () => {
  let mockSetSelectedFilters: jest.Mock;
  let mockSetReqObject: jest.Mock;

  beforeEach(() => {
    // 每次测试前重置mock函数，避免用例间污染
    mockSetSelectedFilters = jest.fn();
    mockSetReqObject = jest.fn();
  });

  test('updates selectedFilters with remaining items when filtered list is not empty', () => {
    const mockFilters = [
      { type: 'category', value: 'electronics' },
      { type: 'price', value: '100-200' },
      { type: 'category', value: 'clothing' },
    ];

    groupReset('price', mockFilters, mockSetSelectedFilters, mockSetReqObject);

    // 验证过滤后的结果是否正确传入状态更新函数
    expect(mockSetSelectedFilters).toHaveBeenCalledWith([
      { type: 'category', value: 'electronics' },
      { type: 'category', value: 'clothing' },
    ]);
    // 验证请求对象更新函数未被调用
    expect(mockSetReqObject).not.toHaveBeenCalled();
  });

用例2：过滤后无剩余过滤器 #

当所有过滤器都被过滤掉时，需要清空selectedFilters并重置请求对象。

test('clears selectedFilters and resets request object when filtered list is empty', () => {
    const mockFilters = [
      { type: 'category', value: 'electronics' },
      { type: 'category', value: 'clothing' },
    ];

    groupReset('category', mockFilters, mockSetSelectedFilters, mockSetReqObject);

    expect(mockSetSelectedFilters).toHaveBeenCalledWith([]);
    expect(mockSetReqObject).toHaveBeenCalledWith(undefined);
  });
});

如果无法重构组件内函数 #

如果必须在组件上下文测试，可以通过React Testing Library渲染组件，模拟组件状态后调用函数：

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

test('groupReset works correctly in component context', () => {
  render(<YourFilterComponent />);
  // 通过测试ID获取组件实例（需要给组件添加data-testid="filter-component"）
  const component = screen.getByTestId('filter-component').instance;

  // 模拟组件当前状态
  component.selectedFilters = [{ type: 'price', value: '100-200' }];
  // 模拟状态更新函数
  component.setSelectedFilters = jest.fn();
  component.setSelectedFiltersReqObject = jest.fn();

  // 调用组件内的groupReset函数
  component.groupReset('price');

  // 验证行为
  expect(component.setSelectedFilters).toHaveBeenCalledWith([]);
  expect(component.setSelectedFiltersReqObject).toHaveBeenCalledWith(undefined);
});

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