The Wayback Machine - https://web.archive.org/web/20201212162941/https://github.com/vuejs/vue-test-utils/issues/1719
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

Component markup still accessible after calling destroy on wrapper #1719

Open
omeryousaf opened this issue Oct 19, 2020 · 1 comment
Open

Component markup still accessible after calling destroy on wrapper #1719

omeryousaf opened this issue Oct 19, 2020 · 1 comment

Comments

@omeryousaf
Copy link

@omeryousaf omeryousaf commented Oct 19, 2020

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 calls destroy() api on it, and prints the component again. And the second test just prints the component without mounting it.

Steps to reproduce

<template>
	<div>
		Hello {{name}}!
	</div>
</template>
<script lang="ts">
	export default {
		name: 'Hello',
		data() {
			return {
				name: ''
			};
		},
		mounted() {
			console.log(`name: ${this.name}`);
		},
		methods: {
			setName(name) {
				this.name = name;
			}
		}
	}
</script>
import { shallowMount } from '@vue/test-utils';
import HelloComponent from './render-xyz.vue';
import * as flushPromises from 'flush-promises';
describe('Hello component unit tests', () => {
  let wrapper;
  describe('Set 1', () => {
    it('should load component', async () => {
        wrapper = shallowMount(HelloComponent, {});
        expect(wrapper.exists()).toBe(true);
        wrapper.vm.setName('oomer');
        await flushPromises();
        wrapper.destroy();
        console.log(wrapper.html()); // why does this print the full component markup ?
    });
  });
  describe('Set 2', () => {
    it('should log empty component', () => {
      console.log(wrapper.html()); // why does it still print component markup ?
      expect(wrapper.vm.name).toEqual('oomer');
    });
  });
});

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 ?

@lmiller1990
Copy link
Member

@lmiller1990 lmiller1990 commented Oct 21, 2020

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');
    });
  });
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.