如何用Jest测试React组件？未覆盖代码行问题求助

问题分析 #

从你的组件代码、测试代码和覆盖率截图来看，未被覆盖的第8-10行是组件中!isLoading条件下的渲染逻辑。你当前的测试用例仅模拟了isLoading为true的场景，没有触发isLoading为false的分支，导致这部分代码从未被执行，因此覆盖率报告中显示这部分未覆盖。

解决方案 #

补充测试用例，覆盖isLoading为false的场景，确保所有分支逻辑都被执行：

test('渲染非加载状态下的内容', () => {
  // 传入isLoading为false的props
  render(<YourComponent isLoading={false} />);
  
  // 断言非加载状态下的目标元素存在
  expect(screen.getByTestId('你的非加载元素testid')).toBeInTheDocument();
  
  // 可选：断言加载状态元素不存在
  expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
});

额外提示 #

• 测试组件时要覆盖所有分支逻辑：包括不同props、内部状态对应的渲染情况
• 断言元素不存在时，使用queryBy*方法（getBy*找不到元素会抛出错误，不适合此类场景）
• 给非加载状态的关键元素添加对应的data-testid，方便测试时精准定位

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