开玩笑测试失败：打字错误：window.match媒体不是一个函数

Question

这是我第一次体验前端测试。在这个项目中，我使用Jest快照测试并得到一个错误TypeError:window。matchMedia不是我的组件中的功能。

我查阅了Jest文档，找到了“手动模拟”部分，但我还不知道如何做到这一点。

Answer 1

我把一个matchMedia存根放在我的Jest测试文件中（在测试上面），它允许测试通过：

window.matchMedia = window.matchMedia || function() {
    return {
        matches: false,
        addListener: function() {},
        removeListener: function() {}
    };
};

Answer 2

我一直在使用这种技术来解决一堆嘲笑问题。

describe("Test", () => {
  beforeAll(() => {
    Object.defineProperty(window, "matchMedia", {
      writable: true,
      value: jest.fn().mockImplementation(query => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(), // Deprecated
        removeListener: jest.fn(), // Deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
      }))
    });
  });
});

或者，如果您想一直模拟它，您可以将从包调用的mock文件放入其中。json：“SetupFileAfterEnv”：

参考：setupTestFrameworkScriptFile

Answer 3

笑话留档现在有一个“官方”变通方法：

Object.defineProperty(window, 'matchMedia', {
  writable: true,
  value: jest.fn().mockImplementation(query => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  })),
});

未在JSDOM中实现的模拟方法