如何在 Jest 中测试 MediaQuerList.addListener答案

【问题标题】：How to test in Jest the MediaQuerList.addListener如何在 Jest 中测试 MediaQuerList.addListener
【发布时间】：2018-08-28 21:49:06
【问题描述】：

我想测试我的函数是否已正确触发（使用正确的参数），但我找不到实现它的方法...

我有一个自定义的 addEventListener 获取媒体查询的名称、媒体查询本身和一个调度函数

// ... Inside my class
addEventListener(name, mediaQuery, dispatch) {
  // Initialize the mediaQueryList and store it in our list
  const mediaQueryList = window.matchMedia(mediaQuery);
  mediaQueryList.addListener(
    mediaQueryListEvent => this.onScreenChange(name, mediaQueryListEvent)
  );
  this.mediaQueries.set(name, {
    mediaQueryList,
    dispatch
  });

  // Then we look even for the first time on which breakPoint we are
  this.searchAndDispatchBreakpoint(name, mediaQueryList);
}

知道如何测试我的 onScreenChange 是否已使用正确的参数正确调用？

【问题讨论】：

标签： reactjs testing media-queries jestjs

【解决方案1】：

好吧，经过数小时的搜索和尝试，我想出了一个办法。

我成功地模拟了 window.matchMedia 和里面的 addListener 完成后，我只需测试发送给我的方法的参数。

这是我的玩笑测试

it('should test the media query addListener method', () => {
  const bpManager = new BreakpointManager();
  const mediaQuery = 'max-width: 1080px';
  const name = 'name';
  const mediaQueryListEvent = 'mediaQueryListEvent';

  bpManager.onScreenChange = jest.fn();
  window.matchMedia = jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: e => e(mediaQueryListEvent),
    removeListener: jest.fn(),
  }));

  bpManager.addEventListener(name, mediaQuery, dispatch);
  expect(window.matchMedia).toHaveBeenCalledWith(mediaQuery);
  expect(bpManager.onScreenChange).toBeCalledWith(name, mediaQueryListEvent);
});

还有我的方法 addEventListener

addEventListener(name, mediaQuery, dispatch) {
  // Initialize the mediaQueryList and store it in our list
  const mediaQueryList = window.matchMedia(mediaQuery);
  mediaQueryList.addListener(
    mediaQueryListEvent => this.onScreenChange(name, mediaQueryListEvent)
  );
  this.mediaQueries.set(name, {
    mediaQueryList,
    dispatch
  });

  // Then we look even for the first time on which breakPoint we are
  this.searchAndDispatchBreakpoint(name, mediaQueryList);
}

【讨论】：