Тестирование¶

Тестирование гарантирует, что ваш код работает так, как вы задумали, и избавляет вас от утомительной отладки.

Смотрите документацию по Стартовым наборам, где представлена простая в использовании установка с полностью готовой тестовой средой, которая отлично подходит для тестирования компонентов Lit.

Выбор среды тестирования¶

Lit — это стандартная современная библиотека Javascript, и вы можете использовать практически любой фреймворк для тестирования Javascript для проверки вашего Lit-кода. Существует множество популярных вариантов, включая Jest, Karma, Mocha, Jasmine и Web Test Runner.

Чтобы эффективно тестировать Lit-код, необходимо убедиться в том, что среда тестирования поддерживает несколько вещей.

Тестирование в браузере¶

Компоненты Lit предназначены для работы в браузере, поэтому тестирование должно проводиться в браузерной среде. Инструменты, ориентированные на тестирование кода node, могут не подойти.

Поддержка современного Javascript¶

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

Использование полифиллов¶

Для тестирования на старых браузерах в тестовое окружение необходимо загрузить некоторые полифиллы, включая web components polyfills и модуль Lit's polyfill-support. Подробнее см. документацию Polyfills.

Использование Web Test Runner¶

Мы рекомендуем использовать Web Test Runner, поскольку он специально разработан для тестирования современных веб-библиотек, таких как Lit, с использованием современных веб-функций, таких как пользовательские элементы и теневой DOM. См. документацию Getting Started по Web Test Runner.

Для поддержки старых браузеров необходимо настроить Web Test Runner следующим образом:

Установите @web/dev-server-legacy:

1

npm i @web/dev-server-legacy --save-dev

Установите web-test-runner.config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { legacyPlugin } from '@web/dev-server-legacy';

export default {
    /* ... */
    plugins: [
        // make sure this plugin is always last
        legacyPlugin({
            polyfills: {
                webcomponents: true,
                // Inject lit's polyfill-support module into test files, which is required
                // for interfacing with the webcomponents polyfills
                custom: [
                    {
                        name: 'lit-polyfill-support',
                        path: 'node_modules/lit/polyfill-support.js',
                        test: "!('attachShadow' in Element.prototype)",
                        module: false,
                    },
                ],
            },
        }),
    ],
};

Комментарии