时间戳

首页 > 解决方案 > 如何使用 Mocha 测试 Vue.js 中的 DOM 更新？

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

问题描述

我正在努力理解使用 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 运行。

标签： javascriptvue.jsmocha.jskarma-mocha

解决方案

v-model 依赖于输入事件，它不会通过简单地在 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>

在您的测试中手动分派输入事件应该可以工作。在您的示例中，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

推荐阅读