我有一个使用照明元件和Web组件的项目,为此我使用Karma编写了一些测试。我正在使用open-wc堆栈,我的测试运行正常。我刚刚更新了组件,现在我的测试崩溃了。测试使用的是无沙箱模式的ChromeHeadless。
我已经在一些SW帖子上看到,使用polyfills可以潜在地解决该错误,但是我没有运行webpack进行测试,因此可以在不需要polyfills的情况下使其正常工作...
我正在运行karma start --coverage
并遇到此错误。
HeadlessChrome 79.0.3945 (Windows 10.0.0)
Error: Uncaught InvalidStateError: Failed to construct 'HTMLElement': this instance is already constructed (node_modules/lit-element/lib/updating-element.js:96)
at TemplateInstance._clone (node_modules/lit-html/src/lib/template-instance.ts:99:18)
at NodePart.__commitTemplateResult (node_modules/lit-html/src/lib/parts.ts:276:33)
at NodePart.commit (node_modules/lit-html/src/lib/parts.ts:218:12)
at render (node_modules/lit-html/src/lib/render.ts:55:12)
at render (node_modules/@open-wc/testing-helpers/src/litFixture.js:37:3)
at litFixtureSync (node_modules/@open-wc/testing-helpers/src/litFixture.js:54:14)
at litFixture (node_modules/@open-wc/testing-helpers/src/fixture-no-side-effect.js:52:12)
at Context.fixture (components/form-element/test/form-data.test.js:233:22)
form-data.test.js
import { fixture, elementUpdated } from '@open-wc/testing';
[...]
describe('<form-data>', () => {
it('render form', async () => {
// This line seems to be problematic
const el = await fixture(template);
await elementUpdated(el);
expect(el).shadowDom.to.equal(`
<form novalidate>
<slot>
</slot>
</form>
`);
});