使用 Karma 测试 lit-element webcomponent答案

【问题标题】：Test lit-element webcomponent with Karma使用 Karma 测试 lit-element webcomponent
【发布时间】：2020-09-10 19:32:04
【问题描述】：

我正在尝试使用 lit-html 创建一个空白项目，例如模板。我还想添加一些测试功能，所以我一直在尝试让它与 Karma 一起使用。

我可以运行正常的测试，比如添加，没有任何错误，所以我认为 Karma 本身运行正常。但我无法运行任何涉及 webcomponent 的测试。 我无法导入网络组件！

我正在导出 web 组件： export default class MyComponent ...

然后在测试文件上我将其导入： import MyComponent from 'pathToComponent/MyComponent'

当我运行测试时，我得到：

Error loading test file: /test/example.test.js
TypeError: Failed to fetch dynamically imported module: http://localhost:9876/base/test/example.test.js

我在 github repo 上有它：https://github.com/boguz/rollup-lit-redux，所以如果您需要查看我安装了哪些其他软件包，可以更好地查看。

非常感谢任何帮助。谢谢！

【问题讨论】：

标签： javascript karma-runner web-component lit-element web-component-tester

【解决方案1】：

错误消息是由/test/example.test.js 引用的模块引起的 - 错误消息有点欺骗性...

未能动态获取导入的模块

线索是您没有动态地 导入（当您使用const module = await import('path') 时，如果失败，您会在该行收到异常）- 您是静态导入的。该错误消息不是因为它找不到http://localhost:9876/base/test/example.test.js，而是它在该文件中找不到嵌套引用。

猜测example.test.js 包含一个import，其相对路径未提供服务：

import * as testFramework from './testFramework';

export default class MyComponent...

这适用于 TypeScript 和 linting 工具，因为它可以将 ./testFramework 解析为 ./testFramework.d.ts、./node_modules/@types/testFramework.d.ts 或您正在使用的任何类型查找。

但是，在浏览器中，它不知道你实际上想要./testFramework.js 或./testFramework/index.js，它直接请求./testFramework，得到一个404，然后给你调用组件的错误。

简而言之：

如果您静态导入（即使用import * from ...）
但是你得到了

无法获取动态导入的模块：filename.js

错误实际上是与filename.js 中的另一个静态import 相关，而不是filename.js 本身。

网络选项卡将指出哪个依赖项是问题所在，因为它将是 404，修复方法是使用构建工具解决这些导入，或者将 .js 文件的完整相对路径放在源代码中.

【讨论】：