vuejs: как юнит-тестирование main.ts - PullRequest
Новая
       34

vuejs: как юнит-тестирование main.ts

1 голос
/ 20 июня 2019

Я использую vuejs с машинописным шрифтом, но этот вопрос также применим к javascript.

При использовании vue-test-utils компоненты тестируются с использованием mount или shallowMount. Таким образом, я смог протестировать основной компонент App. Теперь мне интересно, как я могу выполнить модульное тестирование файла main.ts, который уже монтирует основной компонент: 

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount('#app');

В модульном тесте проверяется, действительно ли компонент приложения установлен в #app. Неудивительно, что если я просто импортирую main.ts в своем тесте, я получаю эту ошибку:

Не удается найти элемент: # app

Можно ли что-то сделать для создания поддельного DOM, содержащего элемент #app, в который будет смонтирован компонент App?

1 Ответ

2 голосов
/ 20 июня 2019

Вы можете использовать Jest , чтобы издеваться над DOM.Таким образом, вы можете настроить несколько тестов:

  • initialization: * Убедитесь, что без каких-либо параметров он все еще может создавать экземпляр Vue (undefined как маршрутизатор, хранилище и т. Д.).Убедитесь, что свойства, такие как маршрутизатор и т. Д., Добавлены к прототипу
  • Mounting: Создайте фиктивное приложение, которое будет отображаться в созданном вами DOM, и убедитесь, что приложение отображает, как ожидается, правильный элемент

Особенно монтаж выглядит скорее как функциональное тестирование, а не модульное тестирование (поскольку он выполняет больше, чем «единица» работы)

РЕДАКТИРОВАТЬ: предоставить пример 

// __tests__/main.test.js
'use strict';

test('Can mount app', () => {
  document.body.innerHTML =
    '<div id="app">' +
    '</div>';


  // Executes main file
  require('../src/main');

  const pElement = document.getElementById('example');
  expect(pElement).toBeTruthy();
  expect(pElement.textContent).toEqual('Example');
});

С основным файлом: 

// main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

и файлом App.vue: 

<template>
  <div id="app">
    <p id="example">Example</p>
  </div>
</template>

Переписать на Typescript тривиально.Несколько замечаний:

  1. Само приложение не является поддельным (Vue.app, как введено в main.js).Это может быть сделано путем создания отдельного файла макета или с помощью jest.fn(), хотя я сам не проверял это.
  2. Тесты не являются функциональными, тестируют его, но с небольшими изменениями могут быть сделаны для проверки небольших единиц работы
...