Vue 测试工具入门

发布于 2022-06-03 21:13:06 字数 3185 浏览 1047 评论 0

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

离线来电—

暂无简介

0 文章
0 评论
21 人气
更多

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文