Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upGitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
Component markup still accessible after calling destroy on wrapper #1719
Comments
I am not sure exactly why the HTML is still rendered. Either way, I think you are over-thinking this. Just create a new wrapper and let Jest/Node handle the clean up. Avoiding mutation and reassignment will give you more readable, less buggy tests as well: import { shallowMount } from '@vue/test-utils';
import HelloComponent from './render-xyz.vue';
import * as flushPromises from 'flush-promises';
describe('Hello component unit tests', () => {
describe('Set 1', () => {
it('should load component', async () => {
const wrapper = shallowMount(HelloComponent, {});
expect(wrapper.exists()).toBe(true);
wrapper.vm.setName('oomer');
await flushPromises();
console.log(wrapper.html()); // why does this print the full component markup ?
});
});
describe('Set 2', () => {
it('should log empty component', () => {
const wrapper = shallowMount(HelloComponent, {});
console.log(wrapper.html()); // why does it still print component markup ?
expect(wrapper.vm.name).toEqual('oomer');
});
});
}); |
Component fails to be destroyed after calling wrapper.destroy()
I have a simple component (HelloComponent) and a couple of tests. First test shallow mounts the component, prints it (wrapper.html()) on the console, calls a component method (setting the
name
data var) and finally callsdestroy()
api on it, and prints the component again. And the second test just prints the component without mounting it.Steps to reproduce
Expected behaviour
The first test should print undefined or empty when the component is logged after wrapper.destroy() statement.
The second test should print undefined or empty too, and its assertion should fail.
Actual behaviour
The first test prints the full component markup even after the
wrapper.destroy()
statement.The second test prints exactly same component markup on console as first test does, and the second test (i-e its assertion) passes.
Possible Solution
I tried setting
wrapper = null
in the first test instead of wrapper.destroy() and it did stop the component (markup) from being printed again. But is this recommended ?