如何解决使用Karma测试元素web组件
我正在尝试使用lit-html创建一个空白项目,例如模板。我还想添加一些测试功能,因此我一直在尝试使其与Karma一起使用。
我可以进行正常的测试,例如添加测试,没有任何错误,因此我认为Karma本身运行正常。但我无法运行任何涉及Web组件的测试。 我无法导入Web组件!
我正在使用以下方式导出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仓库中:https://github.com/boguz/rollup-lit-redux,因此,如果需要查看我还安装了哪些其他软件包,可以更好地了解一下。
非常感谢您的帮助。谢谢!
解决方法
错误消息是由 /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
- 错误实际上是
import
中的另一个静态filename.js
,而不是filename.js
本身。
网络选项卡将指出哪个依赖项是问题,因为它将是 404,修复方法是使用您的构建工具解决这些导入,或者将 .js 文件的完整相对路径放在您的源中.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。