QQ 相配媒体模拟游戏

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

安装

国家预防机制

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

雅伦

yarn add --dev jest-matchmedia-mock

使用量

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 而不正确执行测试.

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

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

许可证

麻省理工学院

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