Vue 测试工具入门

Question

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