我正在为模板Web组件编写单元测试。在我的一种方法中,我在Web组件的JSX内部的元素上使用了insertHTMLElement。当我在浏览器中正常使用该组件时,该组件可以正常工作。
但是在编写单元测试时,当我使用newSpecPage接口创建此组件时,它中断了,因为MockHTMLElement接口缺少了insertAdjacentHTML和类似的方法,因为Jest用自己的MockDOM替换了普通的DOM接口
my-component.spec.ts
it('should work',()=>{
const myComponent = await newSpecPage({
components: [MyComponent],
html: `<my-component></my-component>`
}); // throws ERROR
expect(myComponent.root.querySelector('#test')).notToBeNull(); // fails
});
my-component.tsx
@Component({
tag: 'my-component'
})
export class MyComponent {
@Element() rootElem:HTMLElement;
componentDidLoad() {
// throws TypeError: this.rootElem.insertAdjacentHTML is not a function
// this.rootElem is of type MockHTML element when run from test else HTMLELement
this.rootElem.addAdjacentHTML('beforeend','<span id="test"></span>);
}
render() {
return (
<div id="container">
</div>
);
}
}