使用 Jest 进行测试时，您可能会遇到与组件是否依赖它相关的错误。这是因为 Jest 在 Node 环境中运行，默认情况下window.matchMedia该环境没有实现。window.matchMedia

要解决此问题，您可以window.matchMedia在测试设置文件中进行模拟。操作方法如下：

1. 为 Jest 创建一个安装文件：此文件将包含全局安装和拆卸操作。您可以为其命名jest.setup.js（或任何您喜欢的名称）。
2. 配置 Jest 以使用此安装文件：更新您的jest.config.js或package.json以包含安装文件。
3. window.matchMedia安装文件中的Mock：为 实现一个 mock 函数window.matchMedia。

循序渐进指南

步骤 1：创建安装文件

在您的项目中创建一个新文件，例如jest.setup.js。

步骤 2：配置 Jest 以使用安装文件

如果您使用jest.config.js文件，请添加以下内容：

// jest.config.js
module.exports = {
  setupFiles: ['./jest.setup.js'],
  // other configuration options
};

如果您通过 配置 Jest package.json，请添加以下内容：

// package.json
{
  "jest": {
    "setupFiles": ["./jest.setup.js"],
    // other configuration options
  }
}

步骤 3：window.matchMedia在安装文件中进行模拟

添加模拟window.matchMedia实现jest.setup.js：

// jest.setup.js
global.window.matchMedia = global.window.matchMedia || function() {
  return {
    matches: false,
    addListener: function() {},
    removeListener: function() {}
  };
};

示例组件和测试

组件使用matchMedia

下面是一个使用 React 组件的示例matchMedia：

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    if (window.matchMedia('(min-width: 600px)').matches) {
      console.log('Viewport is at least 600 pixels wide');
    } else {
      console.log('Viewport is less than 600 pixels wide');
    }
  }

  render() {
    return <div>My Component</div>;
  }
}

export default MyComponent;

组件快照测试

以下是使用 Jest 为该组件编写快照测试的方法：

import React from 'react';
import renderer from 'react-test-renderer';
import MyComponent from './MyComponent';

test('MyComponent renders correctly', () => {
  const tree = renderer.create(<MyComponent />).toJSON();
  expect(tree).toMatchSnapshot();
});

运行测试

现在，当您运行 Jest 测试时，该window.matchMedia函数将被模拟，您不会再遇到TypeError: window.matchMedia is not a function错误。

npm test

此设置可确保您的测试可以在 Node 环境中运行，而不会因缺少而失败window.matchMedia。