javascript - vuejs : hur man enhetstestar main.ts

Jag använder vuejs med typescript, men frågan skulle också gälla med javascript.

Med vue-test-utils testas komponenter med mount eller shallowMount. På detta sätt har jag kunnat enhetstesta huvudkomponenten App. Jag undrar nu hur jag kan enhetstesta filen main.ts, som redan mountar huvudkomponenten:

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

Enhetstestet skulle kontrollera om App-komponenten verkligen är monterad i #app. Inte överraskande, om jag bara importerar main.ts i mitt test, får jag detta fel:

Kan inte hitta element: #app

Är det möjligt att göra något för att skapa en falsk DOM som innehåller ett #app-element, där App-komponenten skulle monteras?

Svar #1

Du kan använda Jest för att mocka en DOM. På det här sättet kan du sätta upp flera tester:

  • initierar: *Verifiera att utan några parametrar kan det fortfarande skapa en Vue-instans (undefined som router, store, etc). Verifiera att egenskaper som router etc läggs till prototypen
  • Montering: Skapa en mock-app som renderar till din skapade DOM och verifiera att appen renderar som förväntat till rätt element

Speciellt känns montering mer som funktionstestning istället för enhetstestning (eftersom det utför mer än en 'enhet' arbete)

REDIGERA: ge exempel

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

Med en huvudfil av:

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

Vue.config.productionTip = false;

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

Och en App.vue-fil av:

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

Att skriva om till Typescript är trivialt. Några punkter att notera:

  1. Appen själv är inte mockad (Vue.app som injiceras i main.js). Detta kan göras genom att skapa en separat mock-fil eller använda jest.fn() även om jag inte har testat detta själv.
  2. Tester är inte funktionella tester, men med små ändringar kan de göras för att verifiera små arbetsenheter