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());
});
});
});