Vue 测试工具入门
Vue Test Utils 是 Vue 的官方库,用于从 Node.js 测试 Vue 组件。 例如,假设您有一个简单的计数器组件:
const Vue = require('vue');
module.exports = Vue.component('App', {
data: () => ({ count: 0 }),
methods: {
increment: function increment() {
++this.count;
}
},
template: `
<div>
<span>{{count}}</span>
<button @click="increment">Increment</button>
</div>
`
});
以下是使用 Vue Test Utils 挂载和与上述组件交互的方法。 请注意, Vue Test Utils 需要 JSDo 才能工作 。 下面的示例是一个可以在 Node.js 中运行的独立脚本,不需要测试运行器。
// Make sure to put jsdom before `require('vue')`!
require('jsdom-global')();
const Vue = require('vue');
const { mount } = require('@vue/test-utils');
// Must be a component, **not** a Vue instance, otherwise you get:
// "Failed to mount component: template or render function not defined"
const component = Vue.component('App', {
data: () => ({ count: 0 }),
methods: {
increment: function increment() {
++this.count;
}
},
template: `
<div>
<span>{{count}}</span>
<button @click="increment">Increment</button>
</div>
`
});
const wrapper = mount(component);
run().catch(err => console.log(err));
async function run() {
wrapper.html(); // <div><span>0</span> <button>Increment</button></div>
// Note that `trigger()` is an async function
await wrapper.find('button').trigger('click');
wrapper.html(); // <div><span>1</span> <button>Increment</button></div>
}
使用 Mocha
Mocha 是一个最小的测试框架,因此您可以轻松地将上述脚本移植到 Mocha 测试中。 此外,Mocha 可以在测试完成后轻松清理 JSDo,因此如果您想运行 Node 测试,您不必担心污染 Node.js 环境。
const assert = require('assert');
describe('App', function() {
let Vue;
let mount;
let cleanup;
let wrapper;
before(async function() {
cleanup = require('jsdom-global')();
Vue = require('vue');
mount = require('@vue/test-utils').mount;
});
after(() => cleanup());
beforeEach(function() {
const component = Vue.component('App', {
data: () => ({ count: 0 }),
methods: {
increment: function increment() {
++this.count;
}
},
template: `
<div>
<span>{{count}}</span>
<button @click="increment">Increment</button>
</div>
`
});
wrapper = mount(component);
});
it('increments when you click', async function() {
assert.ok(wrapper.html().includes('<span>0</span'));
await wrapper.find('button').trigger('click');
assert.ok(wrapper.html().includes('<span>1</span'));
});
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
上一篇: Vue 中的错误处理
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论