时间戳

首页 > 解决方案 > 使用 Karma 测试 lit-element webcomponent

javascript - 使用 Karma 测试 lit-element webcomponent

问题描述

我正在尝试使用 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 ，所以如果您需要查看我安装的其他软件包，您可以更好地查看。

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

标签： javascriptkarma-runnerweb-componentlit-elementweb-component-tester

解决方案

错误消息是由于引用的模块/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

  • 该错误实际上是另一个静态importin filename.js，而不是filename.js自身。

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

推荐阅读