I am having difficulty grasping some fundamental concepts of unit testing in Vue.js using Karma, Mocha, and Chai.
Here is the component I am working on:
VueExample.vue
<template>
<div>
<p>{{ name }}</p>
<input v-model="name">
</div>
</template>
<script>
export default {
name: 'VueExample',
data () {
return {
name: 'Bruce Lee'
};
}
}
</script>
This is my current testing approach:
VueExample.spec.js
import Vue from 'vue';
import VueExample from "../../../components/VueExample";
describe('VueExample.vue', () => {
let vm;
beforeEach(() => {
const Constructor = Vue.extend(VueExample);
vm = new Constructor().$mount();
});
it('should change the name', done => {
const input = vm.$el.querySelector('input');
input.value = 'Chuck Norris';
expect(vm.$el.querySelector('p').textContent).to.equal('Bruce Lee');
Vue.nextTick(() =>{
expect(vm.$el.querySelector('p').textContent).to.equal('Chuck Norris');
console.log(vm.$el.querySelector('p').textContent);
done();
});
});
});
I am utilizing Karma for test execution and Chai for assertions. The setup in karma.conf.js is correct. However, when running this test, it fails as the content within the <p> tag does not update. The console.log command displays Bruce Lee.
The tests are being carried out using Firefox.