React Native执行单个Jest测试套件却触发多测试的问题求助

问题详情 #

执行命令：

jest src/containers/components/VerificationView.test.js --runTestsByPath --verbose

该测试文件仅包含一个针对VerificationView的测试用例，但运行时却额外执行了RenderLang、Signup等其他组件的大量测试用例，测试输出显示所有测试都归属于VerificationView.test.js文件下。

相关代码 #

测试文件代码（VerificationView.test.js） #

import React from 'react';
import { render, act, fireEvent, waitFor } from '@testing-library/react-native';
import VerificationView from './VerificationView';

describe('Verification Screen', () => {

    beforeEach(() => {
        jest.useFakeTimers();
    });

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

    it('should render without errors', async () => {

        const verificationRes = {VerificationR: {status:1}};
        const login = jest.fn();
        const authContextValue = { login }; // Mock the context value
        var wrapper = render(
            <VerificationView  />
        );

        await wrapper.update();
        expect(wrapper).toMatchSnapshot();
    });
});

测试输出 #

PASS  src/containers/components/VerificationView.test.js
  RenderLang component
    ✓ should render without errors (24 ms)
    ✓ should call handler onPress (7 ms)
    ✓ render while activeLang is selected (3 ms)
    ✓ render while activeLang is not selected (2 ms)
  Signup component
    ✓ Signup component renders correctly (55 ms)
    ✓ Signup login button press (24 ms)
    ✓ Signup back button press (17 ms)
    ✓ Signup btnTNC button press (20 ms)
    ✓ Signup btnSignup button press (17 ms)
    ✓ Signup setPassword change text (18 ms)
    ✓ Signup setPassword change text (18 ms)
    ✓ Signup setPhone change text (16 ms)
    ✓ Signup setPhone change text empty (29 ms)
    ✓ Signup setEmail change text (18 ms)
    ✓ Signup setLName change text (16 ms)
    ✓ Signup setFName change text (18 ms)
  Verification Screen
    ✓ should render without errors (31 ms)

jest.config.js 配置片段 #

testMatch: [
        "<rootDir>/src/**/*.test.js"
    ],
    testPathIgnorePatterns: ["/node_modules/", "e2e/", "__mocks__/"],
    testEnvironmentOptions: { url: 'http://localhost/' },
    transform: {
        "^.+\\.js$": "babel-jest"
    },
    transformIgnorePatterns: [
        "node_modules\/(?!(@react-native|react-native|native-base.*|react-native-element-dropdown|react-native-image-crop-picker|react-native-easy-grid|react-native-drawer|@react-native-community|@react-native-firebase|react-native-vector-icons|@codler|@twotalltotems/react-native-otp-input|react-native-iphone-x-helper|@react-native-picker|rn-range-slider|react-native-i18n|react-native-flash-message|react-native-linear-gradient|react-native-simple-radio-button|react-native-picker-select|react-native-config)\/)"
    ],

解决方案 #

1. 清除Jest缓存 #

Jest会缓存测试文件和依赖的编译结果，若缓存的旧文件包含其他测试用例，会导致异常执行。运行测试时添加--no-cache参数：

jest src/containers/components/VerificationView.test.js --runTestsByPath --verbose --no-cache

2. 检查组件导入链 #

确认VerificationView.js或其依赖的组件中，是否不小心导入了其他组件的测试文件（比如误导入RenderLang.test.js而非RenderLang.js）。这种错误会导致测试代码被加载到当前测试文件中，从而执行额外的测试用例。

3. 排查全局测试导入 #

检查jest.config.js中的setupFiles/setupFilesAfterEnv配置，确认是否在全局初始化文件中导入了其他测试文件，导致所有测试运行时都会执行这些额外测试。

4. 验证测试文件的独立性 #

检查VerificationView.test.js文件本身，确认没有被其他测试文件通过require或import引入，避免测试用例被重复执行。

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