如何测试React中状态为非空数组时是否正确渲染按钮

问题原因 #

你之前的mock方案把所有useState调用的返回值都统一覆盖了，组件里三个useState（csvData、loading、errors）拿到的都是同一组mock值，自然会出现状态异常。

方案1：模拟CSV加载动作（推荐，符合测试最佳实践） #

不要直接mock组件内部的useState，这种黑盒测试更贴近真实使用场景，也不会因为内部状态调整导致测试失效。我们直接模拟CSVReader加载完成的动作，触发回调更新csvData即可：

import { render, screen } from '@testing-library/react';
import CSVReader from 'react-csv-reader';
import Component from './你的组件路径';

// 全局mock CSVReader组件
jest.mock('react-csv-reader', () => jest.fn());

it('does render Submit button', () => {
  // 构造测试用的CSV数据
  const mockCsvData = [{email: 'test@test.com'}];
  render(<Component />);

  // 拿到CSVReader的props，主动调用加载完成回调传入测试数据
  const csvReaderProps = CSVReader.mock.calls[0][0];
  csvReaderProps.onFileLoaded(mockCsvData);

  // 校验按钮是否正常渲染
  const submitButton = screen.queryByTestId('submit_button');
  expect(submitButton).toBeTruthy();
});

方案2：按调用顺序mock useState（不推荐，仅作参考） #

如果你一定要直接mock状态值，需要按组件内useState的声明顺序返回对应的值：

import React from 'react';
import { render, screen } from '@testing-library/react';
import Component from './你的组件路径';

jest.mock('react', () => ({
  ...jest.requireActual('react'),
  useState: jest.fn(),
}));

it('does render Submit button', () => {
  // 按组件内useState的调用顺序依次返回对应状态：csvData → loading → errors
  React.useState
    .mockReturnValueOnce([[{email: 'test@test.com'}], jest.fn()])
    .mockReturnValueOnce([false, jest.fn()])
    .mockReturnValueOnce([[], jest.fn()]);

  render(<Component />);

  const submitButton = screen.queryByTestId('submit_button');
  expect(submitButton).toBeTruthy();
});

afterEach(() => {
  jest.clearAllMocks();
});

该方案耦合了组件内部的useState声明顺序，只要你调整了状态的位置、新增/删除了状态，测试就会失效，优先选择方案1。

内容的提问来源于stack exchange，提问作者Michał Antczak