开玩笑测试失败：TypeError：window.matchMedia 不是函数

Question

这是我的第一次前端测试经验。在这个项目中，我使用 Jest 快照测试并在我的组件中收到错误 TypeError: window.matchMedia is not a function 。

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

原文由 TIJ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Jest 文档现在有一个“官方”解决方法：

 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 中实现的模拟方法

原文由 Selrond 发布，翻译遵循 CC BY-SA 4.0 许可协议

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(),
      }))
    });
  });
});

或者，如果你想一直模拟它，你可以放入你的 mocks 从你的 package.json 调用的文件： "setupFilesAfterEnv": "<rootDir>/src/tests/mocks.js",

参考： setupTestFrameworkScriptFile

原文由 Maxime Beauchamp 发布，翻译遵循 CC BY-SA 4.0 许可协议