Мне не стыдно сказать, что начинать с написания тестов для компонента Vue было сначала очень сложно.
Единственное, что я знал, это то, что я хотел использовать Jest, современную платформу для тестирования JavaScript, потому что я использовал ее раньше и был ею вполне доволен. Подробнее о Jest позже.
Конечно, официальная документация Vue объясняет, как делать простые утверждения. Но для реального компонента документация не годится. Тесты нашего компонента должны утверждать, что он правильно отображается в dom, то есть кеширует имя последней открытой вкладки](https://github.com/spatie/vue-tabs-component), что он открывает нужный вкладку при переходе к URL-адресу с определенным фрагментом, что фрагменты могут быть настроены и многое другое.
К счастью, мой коллега Себастьян очень помог с настройкой правильной среды для написания тестов. Если вы хотите написать и протестировать свой собственный компонент Vue, ознакомьтесь с нашим репозиторием скелета-vue, в котором есть все, что нужно для начала. .
С этой надежной настройкой я мог преодолеть первоначальное разочарование и написать несколько тестов.
Первый взгляд на тесты
Если вы хотите следовать вместе с вами, вам следует клонировать репозиторий vue-tabs-component с помощью
git clone [email protected]:spatie/vue-tabs-component
Внутри клонированного репо запустите yarn
(или npm install
), чтобы получить все зависимости. Поскольку это указано в нашем файле package.json
, эта команда также загрузит jest
, наш тестовый бегун. Чтобы запустить все тесты для пакета, введите эту команду ./node_modules/.bin/jest
. Вы можете выбрать псевдоним для jest
.
Вы увидите этот вывод.
Все тесты зеленые, отлично!
Вам может быть интересно, где хранятся эти тесты и как Jest их находит. Ну а сами тесты хранятся в каталоге __tests__
. Вы не обязаны называть этот каталог как таковой, но, похоже, это соглашение, которому следуют большинство пользователей Jest. Jest просто просканирует весь ваш проект на наличие файлов, оканчивающихся на test.js
, и выполнит внутри них тесты.
Давайте посмотрим на наш первый реальный тест. Откройте __tests__/expiringStorageTest.js
. Этот файл содержит все тесты, которые удостоверяются, что наш компонент Vue работает правильно.
В верхней части файла вы видите эту строку:
describe('vue-tabs-component', () => {
Эта функция describe
является частью Jest. Первый параметр — это просто название вашего набора тестов (оно отображается при запуске Jest). Второй параметр — это функция, содержащая тесты, которые вы хотите запустить. Внутри этой функции вы увидите строки, начинающиеся с функции it
, например:
it('can mount tabs', async () => {
it('displays the first tab by default', async () => {
...
Эти it
функции содержат настоящие тесты. Второй аргумент it
— это функция, которая является самим тестом, первый аргумент — это имя этого теста. Обратите внимание, что вместе с it
перед ним имя теста ясно говорит о том, что будет тестироваться: it can mount tabs
. Вы не видели эти метки в выводе при запуске Jest раньше, потому что в нашем проекте есть несколько тестовых файлов. Вы можете запустить весь тест из одного файла, просто передав этот файл в качестве второго аргумента Jest.
jest __tests__/tabs.test.js
Это выведет что-то такое:
Наше путешествие в коварный мир тестирования компонентов Vue продолжается во второй части этой серии: Первый тест и тестирование снимков.