模板无法使用 Jest 测试 mouseenter\mouseleave 事件

Question

我使用 Stencil 构建了一个简单的按钮组件，并分配了 4 个事件（onMouseDown、onMouseUp、onMouseEnter、onMouseLeave）按钮。该组件如下所示：

   .
   .
   .
   @State() buttonState: string ='disabled';
   .
   .
   .
   someInternalLogic(eventName: Events) {
     ...//just sets a state variable of this.buttonState
   }
   render() {
     return (
       <button
         onMouseDown={() => this.someInternalLogic(Events.MOUSEDOWN)}
         onMouseUp={() => this.someInternalLogic(Events.MOUSEUP)}
         onMouseEnter={() => this.someInternalLogic(Events.MOUSEENTER)}
         onMouseLeave={() => this.someInternalLogic(Events.MOUSELEAVE)}
       >
       </button>
     );
   }

我对一般测试尤其是 Jest 不太熟悉。我很难理解如何综合测试这些事件。我想出了一个可行的解决方法，但显然不是可行的方法。
解决方法：

  it('should mouseleave', async () => {
    const button = await page.root.shadowRoot.querySelector('button');
    
    const mouseleave = new window.Event("mouseleave", {
      bubbles: false,
      cancelable: false
    });

    let mouseleaveBool = false;
    button.addEventListener("mouseleave", e=>{
      mouseleaveBool = true;
    });
    await button.dispatchEvent(mouseleave);

    await page.waitForChanges();
    expect(mouseleaveBool ).toBeTruthy();
  });

Answer 1

您可以直接在组件实例上调用事件处理程序，而不是调度事件

因此对于此组件

export class TestBtn {
  onMouseLeave() {
    // do something
  }

  render() {
    return (
      <Host>
        <button onMouseLeave={() => this.onMouseLeave()}>Test</button>
      </Host>
    );
  }
}

测试可以如下所示

describe('test-btn', () => {
  it('does something on mouse leave', async () => {
    // arrange
    const page = await newSpecPage({
      components: [TestBtn],
      html: `<test-btn></test-btn>`,
    });
    let component = page.rootInstance as TestBtn;

    // act
    component.onMouseLeave();

    // assert
    // check if did something
  });
});