Вводная статья о том как начать писать тесты на 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!'); }); });
Далее мы применяем аналогичный подход при тестировании title нашего заголовка во втором модульном тесте.
Для получения дополнительной информации о тестировании с Vue.js, посмотрите руководство Karma and Mocha guide.
Оригинальная статья: Testing Vue with Jest
Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…
Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…
Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…
Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…
Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…
Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…
View Comments
В очень очень общих чертах ок, но в целом очень мало и слабенько