Vue.js - 具有复杂子项的单元测试组件

Question

让我们假设一个基本的 Bootstrap 驱动的 HTML 表单作为自定义 Vue 组件 MyForm.vue 的一部分

<template>
  <form>
    <div class="form-group">
      <label for="email">Email address</label>
      <input type="email" class="form-control" id="email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</template>

用于测试模板是否成功呈现的单元测试非常简单

describe('MyForm', () => {

  let wrapper;

  beforeEach(...);

  it('Should be rendered', () => {

    let field = wrapper.find('#email');
    expect(field.element.value).toEqual('');
  });
});

这行有效field.element.value 有效，因为field.element 是具有value 属性的本机类型HtmlInputElement。

如果我想访问复杂组件的属性，比如说b-form-input，Bootstrap-Vue 的默认输入元素怎么办？ b-form-input 是 BFormInput 类型的怎么处理呢？只需将HtmlElement 转换为BFormInput？

<template>
  <b-form>
    <b-form-group label="Email">
      <b-form-input type="email" id="email"></b-form-input>
    </b-form-group>
    <b-button type="submit" variant="primary">Submit</button>
  </b-form>
</template>

如何测试非原生组件？特别是类型安全意味着 TypeScript。有什么想法吗？

编辑 03/01/2020

根据muka.gergely 的回答，我找到了this 文章。 shallowMount 默认情况下会存根所有子组件，这也阻止了事件处理。此外，shallowMount 允许手动 unstub 组件，在我的情况下，可以 unstub b-form 和 b-button 以提交事件测试。

const stubs = { // Originally intended to provide custom stubs, here used to unstub components
  BButton,
  BForm,
};

wrapper = shallowMount<MyComponent>(MyComponent, {stubs});

这会影响这些组件被渲染而不是存根。像b-form-input 这样的所有剩余组件仍然会自动存根。

Answer 1

您必须在测试元素之前mount。您不会测试您编写的 Vue 组件，而是测试渲染的输出。

你应该添加 vue-test-utils 然后你的单元测试库（Jest 和 Mocha 都很好支持）。

• 你可以在这里找到 vue-test-utils：https://www.npmjs.com/package/@vue/test-utils
• 更多关于 Vue 单元测试：https://vuejs.org/v2/guide/unit-testing.html
• 更多关于 vue-test-utils：https://vue-test-utils.vuejs.org/guides/#getting-started

这是 App.vue 的基本单元测试（使用 Vuetify 和 vue-router）：

import Vue from 'vue'
import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuetify from 'vuetify'
import VueRouter from 'vue-router'
import App from '@/App';

Vue.use(Vuetify)

const localVue = createLocalVue()
localVue.use(VueRouter)
const router = new VueRouter()

describe('App.vue', () => {
    let vuetify

    beforeEach(() => {
        vuetify = new Vuetify()
    })

    it('mounts and renders', () => {
        const wrapper = shallowMount(App, { localVue, vuetify, router });

        expect(wrapper.html()).toBeTruthy();
    });
});

您可以看到我使用了shallowMount()，因为我对测试 App.vue 的子级不感兴趣（它们都有各自的单元测试）。如果我是，那么我应该改用mount()。