如何用React测试库测试纯JS分页函数？测试无效果代码未覆盖

我编写了三个分页相关的纯JavaScript函数（handlePrev、handleNext、renderPageNumberButton），尝试使用React测试库对其进行测试，但测试无效果，代码行仍处于未覆盖状态。

待测试代码如下：

const handlePrev = (page, setPage) => {
  if (page > 1) {
    setPage(page - 1);
  }
};

const handleNext = (page, setPage, countPage) => {
  if (page < countPage) {
    setPage(page + 1);
  }
};

const renderPageNumberButton = (page, setPage, countPage) => {
  const buttons = [];

  for (let i = 1; i <= countPage; i++) {
    buttons.push(
      <button
        key={i}
        className={`${
          i === page ? "bg-zinc-500 text-zinc-300" : "bg-zinc-800 text-zinc-400"
        } w-10 h-10`}
        onClick={() => setPage(i)}
      >
        {i}
      </button>,
    );
  }

  return buttons;
};

export { handlePrev, handleNext, renderPageNumberButton };

针对性测试方案 #

1. handlePrev 函数测试 #

针对边界条件和正常逻辑编写测试，验证setPage的调用情况：

import { handlePrev } from './your-file-path'; // 替换为实际文件路径

test('当前页大于1时，handlePrev 调用setPage并传入page-1', () => {
  const mockSetPage = jest.fn();
  handlePrev(2, mockSetPage);
  expect(mockSetPage).toHaveBeenCalledWith(1);
});

test('当前页等于1时，handlePrev 不调用setPage', () => {
  const mockSetPage = jest.fn();
  handlePrev(1, mockSetPage);
  expect(mockSetPage).not.toHaveBeenCalled();
});

2. handleNext 函数测试 #

同样覆盖边界和正常逻辑：

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

test('当前页小于总页数时，handleNext 调用setPage并传入page+1', () => {
  const mockSetPage = jest.fn();
  handleNext(2, mockSetPage, 5);
  expect(mockSetPage).toHaveBeenCalledWith(3);
});

test('当前页等于总页数时，handleNext 不调用setPage', () => {
  const mockSetPage = jest.fn();
  handleNext(5, mockSetPage, 5);
  expect(mockSetPage).not.toHaveBeenCalled();
});

3. renderPageNumberButton 函数测试 #

该函数返回React元素，需渲染后验证渲染结果、样式和交互：

import { render, screen, fireEvent } from '@testing-library/react';
import { renderPageNumberButton } from './your-file-path';

test('renderPageNumberButton 渲染对应数量的页码按钮', () => {
  const mockSetPage = jest.fn();
  render(<div>{renderPageNumberButton(2, mockSetPage, 5)}</div>);
  
  // 验证1-5的按钮全部渲染
  for (let i = 1; i <= 5; i++) {
    expect(screen.getByText(i.toString())).toBeInTheDocument();
  }
});

test('renderPageNumberButton 当前页码按钮应用激活样式', () => {
  const mockSetPage = jest.fn();
  render(<div>{renderPageNumberButton(3, mockSetPage, 5)}</div>);
  
  const activeBtn = screen.getByText('3');
  expect(activeBtn).toHaveClass('bg-zinc-500', 'text-zinc-300');
  
  const inactiveBtn = screen.getByText('1');
  expect(inactiveBtn).toHaveClass('bg-zinc-800', 'text-zinc-400');
});

test('renderPageNumberButton 点击页码按钮触发setPage', () => {
  const mockSetPage = jest.fn();
  render(<div>{renderPageNumberButton(2, mockSetPage, 5)}</div>);
  
  fireEvent.click(screen.getByText('4'));
  expect(mockSetPage).toHaveBeenCalledWith(4);
});

内容的提问来源于stack exchange，提问作者Muhammad Khalish Zhafran