Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Memory leak when using VueTour in vue-test-utils [BUG] #247

Open
GeorgeBetts opened this issue Dec 6, 2022 · 0 comments
Open

Memory leak when using VueTour in vue-test-utils [BUG] #247

GeorgeBetts opened this issue Dec 6, 2022 · 0 comments

Comments

@GeorgeBetts
Copy link

Describe the bug
Running a Vue Test Utils unit test with the VueTour package included produces a memory leak. When logging heap usage or detecting memory leaks in Jest, the memory usage can be seen increasing with every test, which only occurs when the VueTour package is included.

Take for example this following very basic vue component:
Memory.vue

<template>
  <div>memory test</div>
</template>

<script>
export default {
  name: "MemoryTest",
};
</script>

And create a unit test for it:
Memory.test.js

import { mount } from "@vue/test-utils";
import MemoryTest from "../components/MemoryTest.vue";
import { createLocalVue } from "@vue/test-utils";
const localVue = createLocalVue();

describe("MemoryTest", () => {
  let wrapper = null;

  beforeEach(() => {
    wrapper = mount(MemoryTest, { localVue });
  });

  afterEach(() => {
    wrapper.destroy();
  });

  it("performs a test", () => {
    expect(wrapper.text()).toContain("memory test");
  });
});

If I run this test with the following options
node ./node_modules/jest/bin/jest.js --runInBand --logHeapUsage --silent --detect-leaks

The test passes successfully:
image

However, if the unit test file is edited to include the VueTour library, and the same test is ran, the --detect-leaks option will fail due to the test now leaking memory:
Updated Memory.test.js file with issue present:

import { mount } from "@vue/test-utils";
import MemoryTest from "../components/MemoryTest.vue";
import VueTour from "vue-tour";
import { createLocalVue } from "@vue/test-utils";
const localVue = createLocalVue();
localVue.use(VueTour);

describe("MemoryTest", () => {
  let wrapper = null;

  beforeEach(() => {
    wrapper = mount(MemoryTest, { localVue });
  });

  afterEach(() => {
    wrapper.destroy();
  });

  it("performs a test", () => {
    expect(wrapper.text()).toContain("memory test");
  });
});

image

To Reproduce
Steps to reproduce the behavior:

  1. Create a new Vue project with the Memory.vue and Memory.test.js files described above (Jest and Vue Test Utils must be included in the project)
  2. Run the unit test using the following command node ./node_modules/jest/bin/jest.js --runInBand --logHeapUsage --silent --detect-leaks
  3. See the error in the console about a detected memory leak

Expected behaviour
The tests should run without increasing the heap size every test. Or when the '--detect-leaks' option is used the test should pass instead of failing due to a memory leak.

Screenshots
If you don't use the --detect-leaks option, the tests will pass but you will clearly be able to see increased memory usage with each test that passes. In the following screenshot, I included the VueTour package in jest_setup.js so that it would be used in every test, to show off the memory leak:
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: n/a
  • vue-tour Version: 2.0.0
  • Jest Version: 26.6.3
  • @vue/test-utils Version: 1.3.0

Additional context
The 'weak-napi' NPM package must be installed to use the '--detect-leaks' option in Jest.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant