Давайте подробнее рассмотрим 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.

Мы узнали много хорошего об этом первом тесте. Но это еще не все. История продолжается в третьей части серии: Создание экземпляра компонента.