Существует ограниченное готовое решение для тестирования веб-компонентов, например wct. Однако мне удалось создать гораздо более простую настройку с помощью lit-html , open-wc, karma. Вот как выглядит мой package.json

Шаг 1. Настройка кармы

Karma необходимо обновить с помощью загрузчиков файлов для обработки модулей es6. karma.conf.js войдет в корень вашей папки

2. Тестовый код

а) Тестирование функциональных компонентов: функциональные компоненты используются только для представления и не управляют собственным внутренним состоянием.

Например, давайте протестируем эту видеокарту

Он включает в себя изображение, заголовок, рейтинги и дату.

поэтому мой ввод будет объектом json с вышеупомянутыми свойствами. Код веб-компонента для карты фильма выглядит следующим образом

Изображения поступают с tmdb ui.

Давайте создадим наш файл movie-card.test.ts.

Сначала импортируйте все необходимые зависимости

import {  html,  fixture,  expect,} from '@open-wc/testing'; 
import './movie-card.js';

Вот наш пример ввода

Давайте начнем наши модульные тесты, мы будем использовать mocha для тестового языка и фикстуру из open-wc для рендеринга компонента. Мы также будем использовать синон для заглушек и подделок.

Как видите, я создал псевдо-рендерер внутри ‘el’.

Перейдем к реальным тестам

  1. Проверьте, имеет ли карточка правильный рейтинг фильма

Мы будем тестировать следующую строку с заданным вводом

<div class="movie__rating">${movie.vote_average}</div>

Наш тестовый пример выглядит следующим образом

  1. Получите элемент или shadowRoot из средства визуализации приспособления. Я в основном тестирую теневой рендерер
  2. проверить, содержит ли элемент ожидаемый вывод
it('has a proper movie rating', async () => {
//const el = await fixture('<movie-card></movie-card>');
el.movie = MOVIE_INPUT;
const movieRating = el.shadowRoot.querySelector('.movie__rating');
expect(movieRating.innerHTML).to.equal('7.2');
});

Таким образом, мы ожидаем, что рейтинг фильма будет 7,2, поэтому, согласно нашим данным, тестовый пример должен быть успешным. Вы можете попробовать, предоставив другой ввод.

Теперь запустите npm run test, чтобы проверить покрытие.

2. Проверьте правильность названия фильма

<h3 class="movie__title">${movie.title}</h3>
it('has a proper movie title', async () => {
el.movie = MOVIE_INPUT;
const title = el.shadowRoot.querySelector('.movie__title');
expect(title.innerHTML).to.equal('Aladdin');
});

3. Проверьте, есть ли правильный постер фильма

<img src="${posterUrl}" alt="${movie.title}">
it('has a proper movie poster', async () => {
el.movie = MOVIE_INPUT;
const poster = el.shadowRoot.querySelector('.movie__poster > img');
expect(poster.src).to.equal('https://image.tmdb.org/t/p/w500/3iYQTLGoy7QnjcUYRJy4YrAgGvp.jpg');
});

4. Минус: в чеке нет афиши фильма

<img src="${posterUrl}" alt="${movie.title}">
it('has a NO movie poster', async () => {
delete MOVIE_INPUT.poster_path;
el.movie = MOVIE_INPUT;
const title = el.shadowRoot.querySelector('.movie__poster > img');
expect(title.src).to.contain('no-poster.png');
});

Итак, мы подошли к концу, чтобы протестировать наш веб-компонент презентации, в следующей части мы перейдем к тестированию компонентов с отслеживанием состояния и, что наиболее важно, к тестированию пользовательских событий.

Вот наш окончательный код

Перейти ко второй части серии

Вы можете проверить полный код здесь по адресу https://github.com/inms-adarsh/movie-app-webc, а демо — по адресу https://movie-app-892c6.firebaseapp.com/.