使用Karma测试元素Web组件 [英] Test lit-element webcomponent with Karma

问题描述

我正在尝试使用lit-html创建一个空白项目，例如模板.我还想添加一些测试功能，因此我一直在尝试使其与Karma一起使用.

I am trying to create a blank project, like a template, using lit-html. I wanted to also add some testing capabilities, so i have been trying to get it to work with Karma.

我可以进行正常的测试，例如添加测试，而没有任何错误，因此我认为Karma本身运行正常.但是我无法运行任何涉及Web组件的测试.我无法导入Web组件！

I can run a normal test, like an addition, without any errors, so i think Karma itself is running ok. but i can't run any test involving the webcomponent. I can't import the webcomponent!

我正在使用以下方式导出Web组件:导出默认类MyComponent ...

i am exporting the webcomponent with: export default class MyComponent ...

，然后在测试文件中，我将其导入:从"pathToComponent/MyComponent"导入MyComponent

and then on the test file i am importing it with: 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 ，因此，如果需要查看我还安装了哪些其他软件包，可以更好看一下.

I have it on a github repo here: https://github.com/boguz/rollup-lit-redux, so you can take a better look if you need to see what other packages i have installed.

非常感谢您的帮助.谢谢！

Any help is very appreciated. Thank you!

推荐答案

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

The error message is due to a module referenced by /test/example.test.js - the error message is a little deceptive...

无法动态获取 导入的模块

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

The clue is that you didn't dynamically import (that's when you use const module = await import('path') and you'd get an exception on that line if it failed) - you statically imported. That error message is not because it couldn't find http://localhost:9876/base/test/example.test.js, it's that it couldn't find a nested reference in that file.

猜测 example.test.js 包含一个 import ，其中没有提供相对路径:

At a guess example.test.js contains an import with a relative path that isn't served:

import * as testFramework from './testFramework';

export default class MyComponent...

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

That works in TypeScript and linting tools because it can resolve ./testFramework to ./testFramework.d.ts, ./node_modules/@types/testFramework.d.ts or whatever type lookup you're using.

但是，在浏览器中，它不知道您实际上是否想要 ./testFramework.js 或 ./testFramework/index.js ，它会请求./testFramework 直接获取404，然后为调用组件提供该错误.

However, in the browser it doesn't know you actually want ./testFramework.js or ./testFramework/index.js, it requests ./testFramework directly, gets a 404, and then gives you that error for the calling component.

简而言之:

• 如果您静态导入(即使用 import * from ... )
• 但是你得到

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

Failed to fetch dynamically imported module: filename.js

• 错误实际上是由 filename.js 中的另一个静态 import 引起的，而不是 filename.js 本身.
• The error is actually with another static import in filename.js, not getting filename.js itself.

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

The network tab will point you at which dependency is the problem, as it will be a 404, and the fix is either resolve these imports with your build tools, or put the full relative path to the .js file in your source.

这篇关于使用Karma测试元素Web组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！