React组件测试（Jest+RTL）内存泄漏问题排查求助

云上老周

2026-8-15

问题分析与解决方案

核心疑问解答

你观察到的现象确实指向React、MUI、Leaflet等库被多次初始化。堆快照中这些库重复出现且浅层大小一致，说明Jest在测试过程中多次加载了这些库的模块实例，而非复用同一个缓存实例，这会直接导致内存占用攀升。

可能的原因

模块导入路径不一致：如果不同测试文件或组件中，对React、MUI等库的导入路径存在差异（比如混用绝对路径、相对路径或别名），Jest会将它们判定为不同模块，重复加载并初始化。
HOC重复创建组件实例：你在每个it测试块中都调用baseHocUnitTests(CustomIcon)，虽然HOC内部使用的是全局单例的store和theme，但每次调用都会生成新的组件包裹层，结合Jest的测试隔离机制，会累积不必要的内存占用。
Jest配置破坏模块缓存：若jest.config.js中开启了resetModules: true，会在每个测试后重置模块缓存，强制重新加载所有依赖库；或者transform转译配置存在问题，导致模块缓存失效。
全局状态未清理：Redux全局store、MUI主题等状态容器，若在测试中修改了状态但未重置，会残留大量旧状态引用，无法被GC回收。

修复步骤

1. 复用HOC包裹的组件

不要在每个it块中重复创建WrappedComponent，将其提升到describe块外层，避免重复生成组件实例：

describe('CustomIcon component test', () => {
    // 只创建一次包裹组件
    const WrappedComponent = baseHocUnitTests(CustomIcon);

    it('Renders element', () => {
        const { container } = render(<WrappedComponent propertyName={property.name} dataset={dataset} />);
        expect(container.querySelector('svg[aria-label="Primary key"]')).toBeInTheDocument();
    });

    it('Does not render element', () => {
        const { container } = render(<WrappedComponent propertyName={propertyWithoutIcon.name} dataset={dataset} />);
        expect(container.querySelector('svg')).not.toBeInTheDocument();
    });
});

2. 统一模块导入路径

确保所有测试文件和业务组件中，对React、MUI等核心库的导入路径完全一致，比如统一使用：

import React from 'react';
import { MuiThemeProvider } from '@mui/material/styles';

避免混用相对路径（如import React from '../../node_modules/react'）或不一致的别名配置。

3. 调整Jest配置

检查jest.config.js，确保resetModules设为false（默认值），保留模块缓存：
```
module.exports = {
  resetModules: false,
  // 其他配置...
};
```
确保moduleNameMapper中的别名配置统一，避免路径解析差异导致模块重复加载。

4. 清理全局状态

如果使用全局Redux store，在每个测试后重置状态：

beforeEach(() => {
    // 调用自定义的重置状态action
    store.dispatch({ type: 'RESET_STATE' });
});

或者改用测试专用的store实例，避免全局状态污染：

jest.mock('../path/to/your/store', () => {
    const { configureStore } = require('@reduxjs/toolkit');
    return {
        getStore: () => configureStore({ reducer: rootReducer })
    };
});

5. 手动触发垃圾回收（辅助验证）

在测试间隙手动触发GC，帮助验证内存泄漏是否缓解（需保持--expose-gc启动参数）：

afterEach(() => {
    if (global.gc) {
        global.gc();
    }
});

6. 清理第三方库副作用

对于Leaflet这类DOM操作频繁的库，需手动清理实例和DOM元素：

afterEach(() => {
    const mapElements = document.querySelectorAll('[data-leaflet-id]');
    mapElements.forEach(el => {
        if (el._leaflet_id) {
            window.L.map(el).remove();
        }
    });
});

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