javascript - 如何使用 Mocha 测试 Vue.js 中的 DOM 更新？

Question

我正在努力理解使用 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命令输出李小龙。

测试使用 Firefox 运行。

Answer 1

v-model relies on the input event ，这不会简单地通过在 JavaScript 中编辑输入的值来实现。在 Vue 之外也是如此，如下所示:

function logInput(e) {
  console.log('input', e.target.value)
}

function update() {
  const input = document.querySelector('#input1')
  input.value = "foo"
}

<input oninput="logInput(event)" id="input1">
<button onclick="update()">Update textbox</button>
<div>Clicking button changes text but does not emit <code>input</code> event. See console.</div>

在您的测试中手动分派(dispatch)输入事件应该可以工作。在您的示例中，执行 input.dispatchEvent(new Event('input'))设置后 input.value :

const input = vm.$el.querySelector('input');
input.value = 'Chuck Norris';
input.dispatchEvent(new Event('input')); // input event required to update v-model