如何在React Testing Library测试用例中设置useState初始状态

你遇到的报错有两个核心原因：

1. 组件状态逻辑问题：初始化时isLoading为false，但是挂载完成后立刻触发空依赖的useEffect将isLoading设为true，页面会立刻切换为加载组件，导致测试无法捕获到role=homepagedata的元素。
2. 代码语法问题：你定义的renderComponent方法没有返回值，箭头函数用大括号包裹逻辑时需要显式写return，否则就算isLoading为false也会返回undefined，无法渲染目标元素，需要先修正：

// 修正后写法1：显式return
const renderComponent = () => {
  return <div role="homepagedata"></div>;
}
// 修正后写法2：省略大括号隐式返回
const renderComponent = () => <div role="homepagedata"></div>;

方案1：改造组件支持外部控制加载状态（推荐） #

符合React测试最佳实践，不需要mock内部状态，可维护性更高。
第一步修改组件代码，新增可选props控制初始加载状态：

// edit-inspection.tsx
interface EditInspectionProps {
  initialLoading?: boolean
}

const EditInspection = ({initialLoading = false}: EditInspectionProps) => {
  const [isLoading, setIsLoading] = useState(initialLoading);
  useEffect(() => {
    // 仅当未传入initialLoading时，才自动开启加载态，可根据业务逻辑调整
    if (initialLoading === undefined) {
      setIsLoading(true);
    }
  }, [initialLoading]);

  const renderComponent = () => <div role="homepagedata"></div>;
  return isLoading ? <CircularIndeterminate /> : renderComponent();
}

export default EditInspection;

第二步修改测试用例，直接传入props指定初始加载状态为false：

import EditInspection from '../edit-inspection';

test('Add new quality inspection record', () => { 
  render(<EditInspection initialLoading={false} />);
  expect(screen.getByRole('homepagedata')).toBeInTheDocument();
});

方案2：mock useState强制设置初始值（不推荐，仅应急使用） #

如果暂时不想修改组件代码，可以直接mock React的useState来覆盖isLoading的初始值：

import EditInspection from '../edit-inspection';
import * as React from 'react';

const mockSetIsLoading = jest.fn();
jest.spyOn(React, 'useState').mockImplementation(initial => {
  // 匹配初始值为false的state，也就是你定义的isLoading
  if (initial === false) {
    return [false, mockSetIsLoading];
  }
  // 其他state走原有逻辑
  return jest.requireActual('react').useState(initial);
});

test('Add new quality inspection record', () => { 
  render(<EditInspection />);
  expect(screen.getByRole('homepagedata')).toBeInTheDocument();
});

该方案缺陷：如果组件内存在其他初始值为false的state会被误mock，组件内部状态逻辑变更后测试很容易失效。

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