React 18 - TypeError：无法读取未定义的属性（读取“匹配”）

Question

使用

window.matchMedia

进行测试时出现以下错误。这在生产和本地运行良好，这只是测试期间的一个问题。

我正在使用 React 18 和 vite。

TypeError: Cannot read properties of undefined (reading 'matches') 

建议在笑话文档中将以下内容添加到我的

setupTests.js

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

这似乎不起作用。

Answer 1

解决方案是将以下内容添加到我的

setupTests.js

中，

global.matchMedia = global.matchMedia || function(query) {
  return {
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(), // deprecated
    removeListener: vi.fn(), // deprecated
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  }
}