使用React Testing Library执行单元测试时代码覆盖率不稳定

问题描述 #

使用React Testing Library为Material UI组件编写测试，所有测试用例均能正常通过，但执行完整测试套件时，代码覆盖率会在66%、84%和100%之间随机变化；单独执行单个测试脚本时，覆盖率表现正常。

可能原因与解决方案 #

1. 测试异步操作写法错误 #

原测试中waitFor的使用方式不正确，UserEvent.click本身是异步函数，无需包裹在waitFor的异步回调里，且waitFor的核心作用是等待断言条件满足，而非等待操作执行。错误的写法可能导致组件渲染状态不稳定，覆盖率统计失效。

修正后的测试代码：

test('验证删除按钮功能', async () => {  
  render(<MyComponent/>);
  
  // 直接获取元素（预期存在时用getBy而非queryAllBy，更简洁）
  const opener = screen.getByTestId('delete-pop-up-opener');
  await UserEvent.click(opener);
  
  // 用waitFor等待弹窗按钮出现，确保组件完成渲染
  await waitFor(() => {
    expect(screen.getByTestId('delete-pop-up-button')).toBeInTheDocument();
  }, { timeout: 10000 });
  
  const deleteButton = screen.getByTestId('delete-pop-up-button');
  await UserEvent.click(deleteButton);
  
  expect(component).toMatchSnapshot();
});

2. 测试间状态泄漏 #

多个测试执行时，组件的状态（比如控制Popover显示的some_flag_to_on_popover）未在测试间重置，导致测试互相干扰，部分代码分支未被正确覆盖。

解决方法：在每个测试前后清理状态与mock：

beforeEach(() => {
  // 清除所有mock调用与实例
  jest.clearAllMocks();
  // 若使用全局状态管理（如Redux），在此重置store
});

afterEach(() => {
  // 清理DOM残留
  cleanup();
});

3. Material UI组件动画导致渲染延迟 #

Material UI的Popover组件带有过渡动画，可能导致组件渲染异步完成，测试代码未等待动画结束就执行断言，覆盖率工具无法捕捉到完整代码执行路径。

解决方法：在测试中禁用Material UI的过渡动画：

import { createTheme, ThemeProvider } from '@mui/material/styles';

// 创建禁用过渡的主题
const testTheme = createTheme({
  transitions: {
    create: () => 'none',
  },
});

// 用测试主题包裹组件
test('验证删除按钮功能', async () => {  
  render(
    <ThemeProvider theme={testTheme}>
      <MyComponent/>
    </ThemeProvider>
  );
  
  // 后续测试逻辑...
});

4. Jest覆盖率缓存异常 #

Jest的覆盖率缓存可能出现损坏，导致统计结果不稳定。

解决方法：运行测试前清除缓存：

jest --clearCache

5. 覆盖率配置错误 #

检查jest.config.js中的覆盖率配置，确保collectCoverageFrom正确匹配目标文件，避免遗漏或错误排除：

module.exports = {
  // 其他配置...
  collectCoverageFrom: [
    'src/**/*.{js,jsx}',
    '!src/**/*.test.{js,jsx}',
    '!src/index.js' // 根据项目情况调整排除项
  ]
};

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