Vue. js - Компонент модульного тестирования со сложными дочерними элементами - PullRequest
Новая
       14

Vue. js - Компонент модульного тестирования со сложными дочерними элементами

3 голосов
/ 25 февраля 2020

Предположим, что базовая c 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 имеет собственный тип HtmlInputElement с атрибутом value.

Что если Я хочу получить доступ к атрибуту сложного компонента, скажем, о 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 позволяет вручную отстегивать компоненты, в моем случае - отменить вставку 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, по-прежнему автоматически заглушаются.

1 Ответ

2 голосов
/ 25 февраля 2020

Вы должны mount элементы перед их проверкой. Вы проверяете не Vue компонент, который вы написали, а обработанный вывод.

Вы должны добавить vue -test-utils , затем свой модуль библиотека тестирования ( Jest и Mocha хорошо поддерживаются).

Вот базовый c модульный тест для Приложение. 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() вместо.

...