测试使用预期的 CustomEvent() 调用侦听器

今天我意识到我们在测试中遇到了问题（开玩笑）

我们有一个发出 CustomEvents 的函数

在我们的 Jest 测试中，我们定义一个侦听器并检查它是否使用预期事件调用

---

我尝试更改自定义事件的详细信息（内部对象）

...测试仍然通过？

  test('events.voiceEvent() emits "CustomEvent{ lavoiceevent }" event', () => {
    const expectedEvent = new CustomEvent('lavoiceevent', {
      detail: { event: 'USER_SAID_HELLO_ERRRRROR' },
    });

    window.addEventListener('lavoiceevent', listener);
    events.voiceEvent('USER_SAID_HELLO');

    expect(listener).toHaveBeenCalledWith(expectedEvent); // ✅
    expect(listener).toHaveBeenCalledTimes(1);
  });

问题是这条线无法按预期工作（这是与事件序列化相关的问题）

  expect(listener).toHaveBeenCalledWith(expectedEvent)

为了解决这个问题（并使我们的测试确实检查事件的细节），我们应该使用“mock.calls”：

  test('events.voiceEvent() emits "CustomEvent{ lavoiceevent }" event', () => {
    const listener = jest.fn();
    window.addEventListener('lavoiceevent', listener);

    events.voiceEvent('USER_SAID_HELLO');

    expect(listener).toHaveBeenCalledTimes(1);
    expect(listener).toHaveBeenCalledWith(expect.any(CustomEvent));

    const ev = listener.mock.calls[0][0];
    expect(ev.type).toBe('lavoiceevent');
    expect(ev.detail.event).toBe('USER_SAID_HELLO'); // ? will fail otherwise
  });

--
感谢您的阅读。

以上是测试使用预期的 CustomEvent() 调用侦听器的详细内容。更多信息请关注PHP中文网其他相关文章！