Конфигурация Jest для vue-test-utils

В данной статье расскажу, как по минимуму настроить Jest для работы с Vue Test Utils в проекте и запустить первый тест для vue компонента.

Набор технологий

Vue 2.*
Vue Test Utils 1.*1
Jest v29.*

Процесс настройки

Для начала установим Jest и Vue Test Utils для версии Vue 2:
npm install –save-dev jest @vue/test-utils@1 jest-environment-jsdom
Затем в package.json в раздел scripts укажем псевдоним для запуска тестов:

{
  "scripts": {
    "test": "jest"
  }
}

Теперь нужно создать файл конфигурации для Jest в корне проекта под названием jest.config.js со следующим содержимым:

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '.*\\.(js)#39;: 'babel-jest',
    '.*\\.(vue)#39;: '<rootDir>/node_modules/@vue/vue2-jest'
  },
  testRegex: '/specs/.*'
}

Установим ещё две библиотеки, необходимые для настройки transform.
npm install –save-dev vue2-jest babel-jest

Этого набора настроек нам хватит, чтобы запустить наш первый тест.
Но для начала объясню немного подробнее про каждую настройку.

testEnvironment — отвечает за среду исполнения ваших тестов.
Для работы Vue Test Utils необходимо устанавливать jsdom. В этом режиме мы получаем доступ к DOM нашего vue компонента и сможем проверять, корректно ли рендерится интерфейс в зависимости от переданных в компонент параметров, корректно ли реагирует интерфейс на взаимодействие с пользователем, и другое.

transform — здесь мы указываем обработчики наших файлов по расширениям,
с которыми Jest так или иначе будет взаимодействовать. Для обработки js файлов (ими являются сами тесты, которые мы будем писать чуть позже) нам нужна библиотека babel-jest. Для обработки файлов с расширением vue мы указываем vue2-jest. В документации рекомендуют устанавливать библиотеку vue-jest, но у неё есть проблема: она не умеет обрабатывать ES6 модули. Для такой обработки нужна ещё одна настройка. Поэтому мы выбираем vue2-jest, где всё работает из коробки.

textRegex — этой настройкой говорим, по какому шаблону искать наши тесты.
Я сложил все тесты в папку javascript/specs и указал соответствующий шаблон.

Простой тест

Пришло время написать наш первый тест. Для примера напишем очень простой компонент по пути javascript/example.vue

<template>
  <div class="example">
    <p class="example__text">{{ text }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      text: { type: String, default: 'default text' }
    }
  }
</script>

Наш компонент принимает параметр text. Если такой параметр не будет передан, подставится значение по умолчанию default text. Само значение параметра мы отображаем в шаблоне в теге p.

Теперь давайте проверим работу компонента:

при передаче значения в параметр text, оно отображается в p;
если значение не передаётся, отображается значение по умолчанию.

Создаём по пути javascript/specs файл example.spec.js

1  import example from '../example.vue'
2  import { shallowMount } from '@vue/test-utils'
3  
4  describe('check text prop', () => {
5    describe('when set custom value', () => {
6      it('should be contain foobar text', () => {
7        const wrapper = shallowMount(example, { propsData: { text: 'foobar' }})
8        expect(wrapper.find('p.example__text').text()).toBe('foobar')
9      })
10   })
11 
12   describe('when set no value', () => {
13     it('should be contain default text', () => {
14       const wrapper = shallowMount(example)
15       expect(wrapper.find('p.example__text').text()).toBe('default text')
16     })
17   })
18 })

Разберём, что здесь происходит.

На 1 строке мы импортируем наш компонент.

На 2 строке мы импортируем функцию монтирования shallowMount, которая и обеспечивает нас возможностью тестировать vue компонент.

На 7 строке с помощью функции shallowMount мы создаём специальную переменную wrapper. В аргументы shallowMount в этом случае передаём компонент example и его параметр text cо значением foobar. После выполнения этой строки wrapper будет содержать изолированный
DOM компонента example и различные методы его тестирования.

На 8 строке мы ищем p с классом example__text, получаем содержимое найденного узла функцией text() и ожидаем, что это содержимое будет равно значению foobar, которое мы передавали параметром в shallowMount
на 7 строке.

Второй describe на 12 строке проверяет, что подставляется значение по умолчанию, если параметр text не был передан.

Vue Test Utils предоставляет гораздо больше возможностей по тестированию vue компонентов, чем показано в этом тесте. Все они описаны в документации.

В остальном структура теста будет знакомой, если раньше вы встречались
с тестированием.

Запуск

Теперь давайте запустим тест командой yarn test и убедимся, что он проходит.

Тест запустился и прошёл, конфигурация настроена корректно.

Если нужно видеть отчёт подробнее, добавьте в конфигурацию настройку: verbose: true. В результате вы получите:

Заключение

Итак, наша задача по первоначальной настройке Jest с Vue Test Utils выполнена, тест мы запустили, но всё только начинается. С усложнением vue компонентов вам потребуются более сложные тесты. Советы по их написанию вы найдёте в разделе общих советов документации Vue Test Utils. Если понадобится дополнительно настраивать файл конфигурации Jest (jest.config.js) — есть подробная документация по возможным настройкам.

Спасибо за внимание.