Stenciljs 无法使用 Jest 测试发出的事件

Question

我正在使用 stencil 编写 input 组件，但我在测试单击或 enter 按键时触发的发出事件时遇到了问题。
组件：

    export class Input {
    .
    .
      private inputRef?: HTMLInputElement;
      @Event() inputEvent: EventEmitter<{}>;
    .
    .
    render() {
     return (
      <div class="status">
          <div class="input-wrapper">
            <input onKeyUp = {event => this.handleKeyDown(event)} ref={el => this.inputRef = el as HTMLInputElement}/>
          </div>
      </div>);
     }
      private handleKeyDown(e: KeyboardEvent): void {
        this.dispatchSearchEvent(e);
      }

      private dispatchSearchEvent(e){
        this.inputEvent.emit({type: "event-name", event: e, data: (this.inputRef as HTMLInputElement).value});
      }
    }

conponent.spec.jsx:

  it('fires an event upon enter key press', async () => {
    const component = new InputFields();
    jest.spyOn(component, 'event-name');

      const keyUpEvent = new Event("keyup", {
        key: "enter",
        keyCode: 13,
        which: 13,
        shiftKey: false,
        ctrlKey: false,
        metaKey: false
      });

      keyUpEvent.target = {value: "some input value"}
      component.handleKeyDown(keyUpEvent);
  
      component.inputEvent = { emit: jest.fn().mockReturnValue(Promise.resolve()), };

      expect(component.inputEvent.emit).toHaveBeenCalled();
  });

出现错误：

Cannot spy the event-name property because it is not a function; undefined given instead

  356 |   it('fires an event upon enter key press', async () => {
  357 |     const component = new Input();
> 358 |     jest.spyOn(component, 'event-name');
      |          ^
  359 |
  360 |       const keyUpEvent = new Event("keyup", {
  361 |         key: "enter",

Answer 1

错误消息试图告诉您您的 Input 组件没有名为 event-name 的函数。 spyOn 用于监视函数而非事件。

在 E2E 测试中，您可以对事件使用 E2EElement.spyOnEvent：

const page = await newE2EPage({html: '<my-input></my-input>'});
const component = await page.find('my-input');
const spy = await component.spyOnEvent('inputEvent');
await component.type('x');
expect(spy).toHaveReceivedEventTimes(1);
expect(spy.firstEvent.detail.data).toBe('x');

Stenciljs 无法使用 Jest 测试发出的事件

Stenciljs having troubles testing emitted event with Jest

jestjs

stenciljs

stencil-component