0
votes

I have a simple component (HelloComponent) and a couple of tests. First test shallow mounts the component, prints it (wrapper of the component) on the console, and finally calls destroy() api on it. And the second test just prints it without mounting it. I was expecting the second test to print undefined but it prints the same thing (full component markup) as first test. Is my expectation incorrect ?

<!-- HelloComponent.vue -->
<template>
    <div>
        Hello {{name}}!
    </div>
</template>
<script lang="ts">
    export default {
        name: 'Hello',
        data() {
            return {
                name: ''
            };
        },
        methods: {
            setName(name) {
                this.name = name;
            }
        }
    }
</script>
import { shallowMount } from '@vue/test-utils';
import HelloComponent from '@/HelloComponent.vue';

describe('Hello component unit tests', () => {
  let wrapper;

  describe('Set 1', () => {
    it('should load component', () => {
        wrapper = shallowMount(HelloComponent, {});
        expect(wrapper.exists()).toBe(true);
        wrapper.vm.setName('oomer');
        console.log(wrapper.html());
        wrapper.destroy();
    });
  });

  describe('Set 2', () => {
    it('should log empty component', () => {
      expect(wrapper.vm.name).toEqual('oomer');
      console.log(wrapper.html());
    });
  });
});
in fact, if i print, via console.log(wrapper.html()), the component markup on a new line right after wrapper.destroy(); even in the first test, it still prints the full component markup. - oomer
According to the implementation of the destroy method, I guess your expectation is wrong. The element will be removed from its parent node and the component (wrapper.vm) gets destroyed. Since the wrapper is still holding a reference to the element, the html method still returns the markup. - Philip Weinke
What are you trying to test, anyway? - Philip Weinke
@PhilipWeinke to your first comment, i updated the tests to check if wrapper.vm really gets destroyed but my second test passes (check it out) :(. Howcome it retains the name value that was set in first test ? - oomer
I'm not familar with the vue internals. I had a brief look into the destroy method and while it does quite some things, it doesn't reset the name. I still have no idea what you want to achieve with your tests. - Philip Weinke