Javascript 当我尝试测试导入外部css文件的webcomponents（从“styles.css”导入css）时，Karma测试和headlessChrome失败

我正在尝试测试一个用lit元素创建的网络组件

我正在使用带有karma的开放式wc进行测试。我的webcomponent文件导入一个

css

文件，该文件将被注入webcomponent类中。如果我在组件中导入任何

css

文件，则该组件的测试失败，如果我不导入

css

，则测试通过

我正在使用karma webpack传输代码（管理

css

文件的导入）并在稍后对其进行测试。 我使用了“null”加载程序来管理

css

文件（我不打算测试

css

）

我的

karma.conf

文件

/*eslint禁用导入/无无关依赖项*/
const{createDefaultConfig}=require（@open wc/testing karma”）；
const merge=require（“网页包合并”）；
module.exports=config=>{
config.set(
合并（createDefaultConfig（配置）{
档案：[
{
模式：config.grep？config.grep：“src/***/.test.js”，
类型：“模块”，
注意：错
}
],
预处理器：{
“src/***.test.js”：[“网页包”]
},
网页：{
模式：“发展”，
devtool：“内联源映射”，
决心：{
扩展名：[“.js”、“.ts”]，
模块：[“src”，“节点模块”]
},
模块：{
规则：[
{
测试：/\.css$/,，
使用：[“空加载程序”]
}
]
}
},
esm：{
nodeResolve：对
},
并发：无限
})
);
返回配置；
};

My

testedComponent.js

文件

从“lit元素”导入{html，LitElement}；
从“/styles.css”导入样式；
导出类TestedComponent扩展了LitElement{
render（）{
返回html`
试验
`;
}
}
自定义元素。定义（“测试组件”，TestedComponent）；

我的

testedComponent.test.js

文件

从“@openwc/testing”导入{expect，fixture}”；
导入“/testedComponent.js”；
描述（“测试”，（）=>{
它（“带有css的组件”，异步（）=>{
常数el=等待固定装置（“”）；
期望（el）.shadowDom.to.equal(`
试验
`);
});
});

我期望执行测试，但在图像中收到错误：

HeadlessChrome 77.0.3865（Mac OS X 10.14.6）错误
加载文件失败：src/components/vt-badge/testedComponent.test.js

但是，如果我对

css

导入进行注释，则会执行测试

testedComponent.js

文件，不带

css

导入

从“lit元素”导入{html，LitElement}；
//从“/styles.css”导入样式；
导出类TestedComponent扩展了LitElement{
render（）{
返回html`
试验
`;
}
}
自定义元素。定义（“测试组件”，TestedComponent）；

您找到解决方案了吗？我也有同样的问题…@LuisBento你能找到解决办法吗？我也面临同样的问题error@AzimSaiyed看看这里：你可以看到我是如何测试它的