Давайте подробнее рассмотрим tabs.test.js. В верхней части файла вы можете увидеть эту строку
beforeEach(() => {
Функция, переданная в beforeEach
, будет запускаться перед каждым тестом. Он используется для настройки «мира», в котором вы тестируете. Он эквивалентен методу setUp
PHPUnit, если вы с ним знакомы.
Посмотрим, что внутри beforeEach
. Первое, что там происходит, это следующее:
document.body.innerHTML = `
<div id="app">
<tabs>
<tab name="First tab">
First tab content
</tab>
<tab name="Second tab">
Second tab content
</tab>
<tab name="Third tab">
Third tab content
</tab>
</tabs>
</div>
`;
Здесь мы видим одну из интересных особенностей Jest. Поставляется со встроенным jsdom. Jsdom моделирует всю модель DOM, как если бы вы были в браузере. В этом фрагменте кода перед тем, как мы убедимся, что каждый тест начинается с этого фрагмента html в dom.
Первый тест
Прежде чем рассматривать остальную часть beforeEach
, давайте взглянем на самый первый тест. Цель этого теста - подтвердить, что при монтировании компонента используется правильный html. «Смонтированный» - это Vue, означающий «когда компонент полностью запущен и визуализирован».
it('can mount tabs', async () => {
await createVm();
expect(document.body.innerHTML).toMatchSnapshot();
});
Несмотря на то, что это всего лишь несколько строк, происходит много всего, и я могу представить, что это немного сбивает с толку, если вы не знакомы с современным Javascript. Давайте рассмотрим это подробнее.
Здесь происходит то, что мы сначала создаем экземпляр нашего компонента (подробнее об этом позже), а затем утверждаем, что отображаемый html, поэтому значение document.body.innerHTML
является правильным. Этот expect
метод является частью самого Jest. Jest содержит различные методы для утверждения таких вещей, как toEqual
, toBeNull
и многое другое. На этой странице документации Jest вы можете увидеть все доступные методы утверждения.
Вместо того, чтобы утверждать содержимое document.body.innerHTML
против большого фрагмента html, мы используем здесь toMatchSnapshot
. Давайте выясним, что делает этот метод.
Тестирование снимков
Основная идея тестирования моментальных снимков заключается в том, что вы сравниваете выходные данные своего кода с файлом, записанным на диск. Этот файл называется снимком. Если результат вашего теста совпадает с содержимым этого снимка, он будет успешным, в противном случае - неудачным. Это просто.
В нашем проекте тесты хранятся в каталоге __tests__/__snapshots__
. Если вы откроете tabs.test.js.snap
, вы увидите html, который используется в can mount tabs
тестах.
Замечательно то, что вам не нужно писать эти снимки вручную. Jest может генерировать их для нас. Если вы удалите tabs.test.js.snap
файл и снова запустите тест, вы можете подумать, что can mount tabs
не сработает, но вы ошибаетесь. Давай посмотрим что происходит. Вы можете запустить тест отдельно с помощью этой команды
jest -t="can mount tabs"
В выводе команды вы можете увидеть, что был создан один моментальный снимок. tabs.test.js.snap
был создан. Теперь вы можете проверить на этом снимке, соответствует ли содержимое ожидаемому результату. Запустите тест еще раз, и вы увидите, что он пройдет.
Давай попробуем провалить тест. Мы собираемся здесь немного обмануть и имитировать измененный вывод, просто отредактировав текущий снимок (в реальной жизни вы бы никогда не отредактировали снимок вручную). Если я немного изменил html в снимке и снова запустил тест, он не сработает.
Если вы хотите узнать больше о тестировании снимков, вы можете прочитать эту статью, которую написал об этом мой коллега Себ, посмотреть это видео о том, как я использовал тестирование снимков в PHP, или просто перейдите на соответствующую страницу в документации Jest.
Мы узнали много хорошего об этом первом тесте. Но это еще не все. История продолжается в третьей части серии: Создание экземпляра компонента.