如何使用Mocha在Vue.js中测试DOM更新？

Question

bounty到期在7天内。该问题的答案有资格获得+ 50声望赏金。cezar希望对此问题引起更多关注：“我正在寻找最佳实践。答案应说明其工作方式和原因。”

我正在努力了解使用Karma，Mocha和Chai在Vue.js中进行单元测试的一些基本概念。

这是我的组件：

VueExample.vue

<template>
    <div>
        <p>{{ name }}</p>
        <input v-model="name">
    </div>
</template>

<script>
    export default {
        name: 'VueExample',
        data () {
            return {
                name: 'Bruce Lee'
            };
        }
    }
</script>

这就是我要测试的方式：

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

我使用Karma运行测试，并使用Chai作为断言库。一切都已在karma.conf.js中正确配置。当我运行此测试时，它将失败。标签<p>中的文本不变。 console.log命令输出Bruce Lee。

测试在Firefox上运行。

Answer 1

更改输入的值不会触发Vue来更新模型（因为输入的属性不是反应性的。'