Не можна недооцінювати важливість тестування додатків Vue.js , а Jest в цьому незамінний помічник.

Оскільки ми знаходимося в середовищі Vue.js, ми  будемо використовувати vue-test-utils , щоб спростити взаємодію з нативними елементами Vue.

Налаштування проекту

Налаштувати середовище тестування легко. У попередніх версіях CLI Vue.js  нам доводилося робити це вручну, але тепер це входить в стандартну комплектацію проекту.

Переконайтеся, що на вашому комп'ютері встановлено CLI Vue.js, виконавши такі дії:

$ Npm install - g @vue / cli
 # OR 
$ yarn global add @vue / cli

# Ensure you have the appropriate version (3.xx>) with 
$ vue - version

Створіть новий проект з CLI з наступними опціями:

$ Vue create testing - vue

> Manually select features
 > Babel , Linter / Preformatter , Unit Testing > ESLint ( your preference ) > Lint on save
 > Jest > In dedicated config files        


$ Cd testing - vue
$ Code . 
$ Npm run serve

Тестування

Тепер, коли ми згенерували наш проект Vue за допомогою Jest, ми можемо перейти до папки tests / unit. Всередині цієї папки у нас є файл з ім'ям  example.spec.js  наступного змісту:

import { shallowMount } from "@ vue / test-utils" ; import HelloWorld from "@ / components / HelloWorld.vue" ;   

describe ( "HelloWorld.vue" , () => { 
  it ( "renders props.msg when passed" , () => { const msg = "new message" ; const wrapper = shallowMount ( HelloWorld , { 
      propsData : { msg } }); 
    expect ( wrapper . text ()). toMatch ( msg ); }); });      

Як зазначено в нашому  package.json , ми можемо запустити цей модульний тест, набравши:

$ Npm run test : unit

Ця команда запустить всі модульні тести в рамках нашого проекту. 

Ми можемо додати до цієї команди прапорець  -watch , щоб вона працювала у фоновому режимі при створенні і редагуванні нових тестів.

"scripts" : {
  "test: unit" : "vue-cli-service test: unit --watch"
}

Модульне тестування

Давайте в нашому невеликому прикладі створимо новий компонент з ім'ям FancyHeading. Він представлятиме заголовок, який можна налаштувати за допомогою  title  і  color.

<Template>
  <h1: style = "headingStyles" > { { title } } </ h1>
</ Template>
<Script>
export default {
  data ( ) { 
    return {
      headingStyles: {
        color: this.color
      }
    } ;
  } ,
  props: [ "title" , "color" ]
} ;
</ Script>

Щоб виконати модульне тестування, нам потрібно створити відповідний файл FancyHeading.spec.js  в каталозі  tests / unit .

Набір тестів можна розглядати як групу тестів, зосереджених навколо певного модуля або функціональності. Давайте розглянемо  наш перший модульний тест з Jest і Vue. 

import Vue from 'vue' ;
import FancyHeading from '@ / components / FancyHeading.vue' ;
function mountComponentWithProps ( Component, propsData ) {  
  const Constructor = Vue. extend ( Component ) ;
  const vm = new Constructor ( {
    propsData
  } ) . $ Mount ( ) ;
  return vm. $ el;
}describe ( 'FancyHeading.vue' , ( ) => {
  it ( 'should be the correct color' , ( ) => {
    const headingData = mountComponentWithProps ( FancyHeading, { color: 'red' } ) ; 
    const styleData = headingData.style. getPropertyValue ( 'color' ) ;
    console. log ( styleData )
    expect ( styleData ) . toEqual ( 'blue' ) ;
  } ) ;
it ( 'should have the correct title' , ( ) => {
    const headingData = mountComponentWithProps ( FancyHeading, { title: 'Hello, Vue!' } ) ; 
    const titleData = headingData.textContent;
    expect ( titleData ) . toEqual ( 'Hello, Vue!' ) ;
  } ) ;
} ) ;

1. Ми ночали з імпорту Vue  і необхідних компонентів, які ми хочемо протестувати.
2. Далі використовуємо describe для інкапсуляції численних модульних тестів, що оточують компонент FancyHeading.
3. Кожен модульний тест створюється за допомогою функції  it, спочатку надаючи опис того, що ми тестуємо, а потім функцію.
4. У нашому першому твердженні: It must have the correct color  (воно повинно мати правильний колір), ми монтуємо наш компонент в новий екземпляр Vue за допомогою  mountComponentWithProps .
5. Потім ми створюємо змінну  styleData , яка містить те, що ми очікуємо отримати від нашого тесту.
6. Нарешті, ми стверджуємо, що це вірно, використовуючи expect . Якщо ми запустимо тест в терміналі за допомогою команди  $ npm run test: unit -watch , ми побачимо  PASS  для цього модульного тесту.

Далі ми застосовуємо аналогічний підхід при тестуванні  title  нашого заголовка в другому модульному тесті.

Джерело перекладу