# @deanwhillier/jest-matchmedia-mock 中文文档

规范地址：https://npmcn.com/package/%40deanwhillier/jest-matchmedia-mock/

版本：1\.2\.0
npm 元数据更新时间：2022-04-05T03:28:04.468Z
中文译文更新时间：2026-11-11T18:32:21.852Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40deanwhillier/jest-matchmedia-mock
原文对照：https://npmcn.com/package/%40deanwhillier/jest-matchmedia-mock/?lang=original
项目主页：https://github.com/dyakovk/jest-matchmedia-mock#readme
源码仓库：https://github.com/dyakovk/jest-matchmedia-mock

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：12.1 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=10
- 运行依赖：0 个
- peer 依赖：jest \>=13
- 首次发布：2021-12-03T04:39:21.617Z
- 最新版本发布：2021-12-03T04:39:21.843Z
- 近 30 天下载量：28773（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

用 Jest 完全测试任何媒体查询的模拟

## 安装

```sh
npm install @deanwhillier/jest-matchmedia-mock
```

也可以使用：`pnpm add @deanwhillier/jest-matchmedia-mock`、`yarn add @deanwhillier/jest-matchmedia-mock`、`bun add @deanwhillier/jest-matchmedia-mock`

## README

# QQ 相配媒体模拟游戏

![Travis (.org)](https://img.shields.io/travis/dyakovk/jest-matchmedia-mock) ![Coveralls github](https://img.shields.io/coveralls/github/dyakovk/jest-matchmedia-mock) ![npm](https://img.shields.io/npm/dw/jest-matchmedia-mock) ![GitHub top language](https://img.shields.io/github/languages/top/dyakovk/jest-matchmedia-mock?label=typescript&logo=typescript) ![npm type definitions](https://img.shields.io/npm/types/jest-matchmedia-mock) ![node](https://img.shields.io/node/v/jest-matchmedia-mock) ![npm peer dependency version](https://img.shields.io/npm/dependency-version/jest-matchmedia-mock/peer/jest)

执行《公约》 `window.matchMedia` 方法允许您控制媒体查询及其监听功能。 您可以简单地调用一个函数来更新当前应用于文档的媒体查询.

## 安装

国家预防机制

```bash
npm i --save-dev jest-matchmedia-mock
```

雅伦

```bash
yarn add --dev jest-matchmedia-mock
```

## 使用量

```javascript
import MatchMediaMock from 'jest-matchmedia-mock';

let matchMedia;

describe('Your testing module' => {
  beforeAll(() => {
    matchMedia = new MatchMediaMock();
  });

  afterEach(() => {
    matchMedia.clear();
  });

  test('Your test case', () => {
    const mediaQuery = '(prefers-color-scheme: light)';
    const firstListener = jest.fn();
    const secondListener = jest.fn();
    const mql = window.matchMedia(mediaQuery);

    mql.addEventListener("change", ev => ev.matches && firstListener());
    mql.addEventListener("change", ev => ev.matches && secondListener());

    matchMedia.useMediaQuery(mediaQuery);

    expect(firstListener).toBeCalledTimes(1);
    expect(secondListener).toBeCalledTimes(1);
  })
})
```

如果可以的话 `window.matchMedia()` 用于测试中引用的函数(或方法)。 若为 `window.matchMedia()` 在测试文件中直接执行, Jest 返回 `TypeError: window.matchMedia is not a function` 而不正确执行测试.

在这种情况下,解决方案是将模拟器的即时化移入单独的文件,并在被测试文件之前将这个文件包括在测试中:

```javascript
import matchMedia from './matchMedia.mock.ts'; // Must be imported before the tested file
import { myMethod } from './file-to-test';

describe('myMethod()', () => {
  // Test the method here...
});
```

## API 密码

### `new MatchMediaMock()`

执行 `window.matchMedia` 返回以下所列方法的示例

### `matchMedia.useMediaQuery()`

更新当前使用的媒体查询,并调用先前为已通过的媒体查询注册的听众功能

-   参数 :
    
    -   `mediaQuery: string;`
-   回返情况: `never | void`
    

### `matchMedia.getMediaQueries()`

返回一个列出匹配的Media 已注册听众的媒体查询的数组

-   回返情况: `string[]`

### `matchMedia.getListeners()`

返回用于通过媒体查询的听众数组副本

-   参数 :
    
    -   `mediaQuery: string;`
-   回返情况: `MediaQueryListener[]`
    

### `matchMedia.clear()`

清除所有注册媒体查询及其听众

### `matchMedia.destroy()`

清除所有注册的媒体查询及其听众,并破坏执行 `window.matchMedia`

## 许可证

[麻省理工学院](http://opensource.org/licenses/MIT)

版权(c) 2020年至今,Kirill Dyakov

## 常见问题

### @deanwhillier/jest-matchmedia-mock 是什么？

用 Jest 完全测试任何媒体查询的模拟

### 如何安装 @deanwhillier/jest-matchmedia-mock？

在项目目录运行 npm install @deanwhillier/jest-matchmedia-mock，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：jest（\>=13）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @deanwhillier/jest-matchmedia-mock 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @deanwhillier/jest-matchmedia-mock 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @deanwhillier/jest-matchmedia-mock 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=10。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @deanwhillier/jest-matchmedia-mock 可以商用吗？

@deanwhillier/jest-matchmedia-mock 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @deanwhillier/jest-matchmedia-mock 的下载量有多少？

根据 npm 官方下载统计，@deanwhillier/jest-matchmedia-mock 在 2026/10/12 – 2026/11/10 这 30 天内被下载 28,773 次，日均约 959 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @deanwhillier/jest-matchmedia-mock 还在维护吗？

最新版本 1\.2\.0 发布于 2021/12/03（4 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/12/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。