如何为React Native函数式组件编写达到100%覆盖率的单元测试用例？

• 别盲目模拟useEffect/useState
  直接模拟钩子容易脱离组件真实运行逻辑，反而覆盖不到实际执行路径。React Native Testing Library的核心是模拟用户行为而非内部钩子，优先通过触发组件渲染、用户交互让useEffect自然执行。

• 确保useEffect的触发条件被覆盖
  如果useEffect依赖特定props或state，测试时要传入对应值触发它。比如useEffect依赖props.userId，测试用例要传不同的userId（包括初始值、更新后的值），确保回调执行。
  示例代码：

  // 组件内的useEffect
  useEffect(() => {
    if (userId) {
      fetchUser(userId);
    }
  }, [userId]);
  
  // 测试代码
  test('userId变化时触发用户数据获取', async () => {
    const fetchUserMock = jest.fn();
    jest.spyOn(global, 'fetchUser').mockImplementation(fetchUserMock);
    
    const { rerender } = render(<UserComponent userId={1} />);
    expect(fetchUserMock).toHaveBeenCalledWith(1);
    
    rerender(<UserComponent userId={2} />);
    expect(fetchUserMock).toHaveBeenCalledWith(2);
  });
  

• 覆盖useEffect内部的分支逻辑
  如果useEffect回调里有条件判断，要编写测试用例覆盖每个分支。比如存在if (isLoggedIn)逻辑时，分别测试isLoggedIn为true和false的场景。

• 清理模拟函数避免污染
  在每个测试前后用jest.clearAllMocks()或jest.restoreAllMocks()重置模拟，保证测试独立性。

• 定位具体未覆盖代码
  不要只看整体覆盖率，打开Jest生成的coverage/lcov-report/index.html报告，找到useEffect内部未覆盖的具体行，针对性补充测试。比如异步函数回调未执行时，用waitFor或findBy*查询等待异步操作完成。

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