你正在查看 Lit 的旧版本文档。点击 这里查看最新版本。

测试

测试确保你的代码按预期运行,并帮助你避免繁琐的调试。

请参阅入门套件文档,获取易于使用的完全预配置测试环境设置,非常适合测试 Lit 组件。

Lit 是标准的现代 JavaScript 库,你几乎可以使用任何 JavaScript 测试框架来测试 Lit 代码。有许多流行的选择,包括 Jest、Karma、Mocha、Jasmine 和 Web Test Runner。

你需要确保测试环境支持以下几点,以便有效地测试 Lit 代码。

Lit 组件设计为在浏览器中运行,因此测试应该在浏览器环境中进行。专门针对测试 Node 代码的工具可能不太合适。

虽然可以通过 shim DOM 调用的方式在没有浏览器的情况下进行测试,但我们不推荐这种方式,因为它无法以用户实际体验的方式测试代码。

你使用的测试环境必须支持使用现代 JavaScript,包括使用带有裸模块标识符的模块,或适当地降级处理现代 JavaScript。有关更多详情,请参阅旧版浏览器要求文档。

要在旧版浏览器上进行测试,你的测试环境需要加载一些 polyfill,包括 Web Components polyfill 和 Lit 的 polyfill-support 模块。有关更多详情,请参阅 Polyfill 文档。

我们推荐使用 Web Test Runner,因为它专门设计用于使用自定义元素和 shadow DOM 等现代 Web 特性来测试 Lit 等现代 Web 库。请参阅 Web Test Runner 的入门指南文档。

为了支持旧版浏览器,你需要按如下方式配置 Web Test Runner:

安装 @web/dev-server-legacy:

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

配置 web-test-runner.config.js:

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

export default {
/* ... */
plugins: [
// 确保此插件始终放在最后
legacyPlugin({
polyfills: {
webcomponents: true,
// 将 Lit 的 polyfill-support 模块注入到测试文件中,
// 这是与 webcomponents polyfill 交互所必需的
custom: [
{
name: 'lit-polyfill-support',
path: 'node_modules/lit/polyfill-support.js',
test: "!('attachShadow' in Element.prototype)",
module: false,
},
],
},
}),
],
};