Any way to avoid memory leaks with shallowMount in vue-test-utils?

user_1955709 0
Viewed 1346

We have a custom unit testing setup for vue that works on Node, Mocha and jsdom package which simulates browser environment (no webpack, karma). We have wrote about 3k specs already (big app with hundreds of components), and now when mocha is running it becomes slower and slower, and eventually the process just hangs. We thought that maybe there is a memory leak in "jsdom", so we changed it to a "domino" (alternative package), but it still hangs.

We checked the heap memory usage and it just keeps growing (up to 1.5 GB!).

So we think that the problem is with either vue or vue-test-utils. It looks like each time we use mount/shallowMount it needs to be destroyed/unmounted after each test to release memory?

Any ideas? Thanks in advance!

vue-test-utils vuejs2 vue.js
2 Answers

The best way i found is to set the wrapper to null after the test suit

example below using mocha 

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

It made a huge difference in my case was having memory leaks of about 8gb after running test multiple times now using about 300mb

JavaScript has automatic memory management and garbage collection. If you get rid of all references to a piece of data, the memory will be reclaimed

Hope this helps

Thanks for voting

user_24762380

make sure that you call wrapper.destroy(); in afterEach method and if you use mount or shallowMount in tests bodies call wrapper.destroy(); before mount the new Vue instance. it works for me.

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