Мне не стыдно сказать, что начинать с написания тестов для компонента 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 продолжается во второй части этой серии: Первый тест и тестирование снимков.