为什么模具中的MockHTMLElement开玩笑地缺少insertAdjacentHTML方法?

时间:2019-10-30 11:03:22

标签: javascript unit-testing jestjs web-component stenciljs

我正在为模板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>
        );
    }
}

0 个答案:

没有答案