有什么方法可以避免 vue-test-utils 中的 shallowMount 导致内存泄漏？答案

【问题标题】：Any way to avoid memory leaks with shallowMount in vue-test-utils?有什么方法可以避免 vue-test-utils 中的 shallowMount 导致内存泄漏？
【发布时间】：2018-11-09 10:37:27
【问题描述】：

我们有一个针对 vue 的自定义单元测试设置，适用于模拟浏览器环境（无 webpack、karma）的 Node、Mocha 和 jsdom 包。我们已经编写了大约 3k 规范（包含数百个组件的大型应用程序），现在当 mocha 运行时，它变得越来越慢，最终进程只是挂起。我们认为“jsdom”可能存在内存泄漏，因此我们将其更改为“domino”（替代包），但它仍然挂起。

我们检查了堆内存使用情况，它一直在增长（高达 1.5 GB！）。

所以我们认为问题出在 vue 或 vue-test-utils 上。看起来每次我们使用mount/shallowMount 都需要在每次测试后销毁/卸载以释放内存？

有什么想法吗？提前致谢！

【问题讨论】：

我只是尝试在我们拥有的每个包装器的每个测试结束后致电wrapper.destroy()，没有任何区别

标签： vue.js vuejs2 vue-test-utils

【解决方案1】：

我发现最好的方法是在测试服之后将包装器设置为 null

下面使用 mocha 的示例

describe(" View ", () => {
   let wrapper;
   beforeEach() { 
        wrapper = mount(Com.Vue, { localVue }) ; 
   });
   after( ()=> { 
        wrapper = null ; 
   });
});

在我的情况下发生了巨大的变化，在多次运行测试后内存泄漏约为 8gb，现在使用大约 300mb

JavaScript 具有自动内存管理和垃圾收集功能。如果你摆脱了对一条数据的所有引用，内存将被回收

希望对你有帮助

感谢投票

【讨论】：

【解决方案2】：

确保调用 wrapper.destroy();在 afterEach 方法中，如果您在测试主体中使用 mount 或 shallowMount 调用 wrapper.destroy();在挂载新的 Vue 实例之前。它对我有用。

describe(" View ", () => {
    let wrapper;
    beforeEach() { 
        wrapper = mount(Com.Vue, { localVue }) ; 
    });
    afterEach(() => {
        wrapper.destroy();
    });
});

【讨论】：