Ошибка теста Jest: TypeError: window.matchMedia не является функцией

Это мой первый опыт тестирования переднего плана. В этом проекте я использую джейст-снимок и получил ошибку TypeError: window.matchMedia is not a function внутри моего компонента.

Я просматриваю документацию jest, я нашел раздел "Ручные макеты", но я пока не знаю, как это сделать.

Ответ 1

Я использовал эту технику, чтобы решить кучу насмешливых проблем.

describe("Test", () => {
  beforeAll(() => {  
    Object.defineProperty(window, "matchMedia", {
      value: jest.fn(() => { return { matches: true } })
    });
  });
});

или если вы хотите, чтобы дразнить его все время, вы можете поместить в ваших mocks файл вызывается из вашего package.json: "setupTestFrameworkScriptFile": "<rootDir>/src/tests/mocks.js",

ref: setupTestFrameworkScriptFile

Ответ 2

Я помещаю заглушку matchMedia в тестовый файл jest (выше тестов), который позволяет проходить тесты:

window.matchMedia = window.matchMedia || function() {
    return {
        matches : false,
        addListener : function() {},
        removeListener: function() {}
    };
};

Ответ 3

Jest использует jsdom для создания среды браузера. Однако JSDom не поддерживает window.matchMedia, поэтому вам придется создавать его самостоятельно.

Jest ручные mocks работают с границами модулей, т.е. требуют/импортируют инструкции, поэтому они не подходят для mock window.matchMedia, поскольку это происходит потому, что это глобальный.

У вас есть два варианта:

Определите собственный локальный модуль matchMedia, который экспортирует window.matchMedia. - Это позволит вам определить ручной макет для использования в вашем тесте.
Определите файл настройки который добавляет макет для matchMedia в глобальное окно.

С помощью любого из этих вариантов вы можете использовать matchMedia polyfill как макет, который, по крайней мере, позволит запускать ваши тесты или если вы необходимо смоделировать разные состояния, которые вы, возможно, захотите написать самостоятельно, с помощью частных методов, позволяющих настроить его поведение, аналогичное Jest fs ручной макет

Ответ 4

Jest Docs теперь есть "официальный" обходной путь:

window.matchMedia = jest.fn().mockImplementation(query => {
  return {
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(),
    removeListener: jest.fn(),
  };
});

Методы насмешки, которые не реализованы в JSDOM

Ответ 5

Только что столкнулись с этой проблемой. Мне пришлось издеваться над ними в jestGlobalMocks.ts:

    Object.defineProperty(window, 'matchMedia', {
      value: () => {
        return {
          matches: false,
          addListener: () => {},
          removeListener: () => {}
        };
      }
    });

    Object.defineProperty(window, 'getComputedStyle', {
      value: () => {
        return {
          getPropertyValue: () => {}
        };
      }
    });

Ответ 6

Перепробовал все вышеизложенное безуспешно. Добавление matchMedia.js в издевается папку, сделал это для меня. Заполнил его содержанием @techguy2000:

// __mocks__/matchMedia.js
'use strict';

Object.defineProperty(window, 'matchMedia', {
    value: () => ({
        matches: false,
        addListener: () => {},
        removeListener: () => {}
    })
});

Object.defineProperty(window, 'getComputedStyle', {
    value: () => ({
        getPropertyValue: () => {}
    })
    });

module.exports = window;

затем импортировал это в setup.js

import matchMedia from '../__mocks__/matchMedia';

Boom! :)

Ответ 7

Вы можете издеваться над API:

describe("Test", () => {
  beforeAll(() => {
    Object.defineProperty(window, "matchMedia", {
      value: jest.fn(() => {
        return {
          matches: true,
          addListener: jest.fn(),
          removeListener: jest.fn()
        };
      })
    });
  });
});