Тестирование Vue с Jest
Вводная статья о том как начать писать тесты на Ject для приложений написанных на Vue.js
Нельзя недооценивать важность тестирования приложений 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.x.x>) 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!'); }); });
- Мы начили с импорта Vue и необходимых компонентов, которые мы хотим протестировать.
- Далее используем describe для инкапсуляции многочисленных модульных тестов, окружающих компонент FancyHeading.
- Каждый модульный тест создается с помощью функции it, сначала предоставляя описание того, что мы тестируем, а затем функцию.
- В нашем первом утверждении: It must have the correct color (оно должно иметь правильный цвет), мы монтируем наш компонент в новый экземпляр Vue с помощью mountComponentWithProps.
- Затем мы создаем переменную styleData, которая содержит то, что мы ожидаем получить от нашего теста.
- Наконец, мы утверждаем, что это верно, используя expect. Если мы запустим тест в терминале с помощью команды $ npm run test: unit –watch, мы увидим PASS для этого модульного теста.
Далее мы применяем аналогичный подход при тестировании title нашего заголовка во втором модульном тесте.