Конфигурация Jest для vue-test-utils
В данной статье расскажу, как по минимуму настроить Jest для работы с Vue Test Utils в проекте и запустить первый тест для vue компонента.
Набор технологий
Процесс настройки
Для начала установим 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) — есть подробная документация по возможным настройкам.