web-dev-qa-db-fra.com

Le test Jest échoue: TypeError: window.matchMedia n'est pas une fonction

Ceci est ma première expérience de test front-end. Dans ce projet, j'utilise des tests de capture instantanée et un code d'erreur TypeError: window.matchMedia is not a function dans mon composant. 

Je consulte la documentation sur la plaisanterie, j’ai trouvé la section "Manipulations manuelles", mais je ne sais pas encore comment faire. 

reactjsjestjs
21
TIJ

J'utilise cette technique pour résoudre de nombreux problèmes moqueurs.

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

ou si vous voulez vous moquer de lui tout le temps, vous pouvez insérer votre fichier mocks appelé à partir de votre package.json: "setupTestFrameworkScriptFile": "<rootDir>/src/tests/mocks.js",

ref: setupTestFrameworkScriptFile

16
Maxime Beauchamp

Je mets un stub matchMedia dans mon fichier de test jest (au-dessus des tests), ce qui permet aux tests de réussir:

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

Jest utilise jsdom pour créer un environnement de navigateur. JSDom ne supporte cependant pas window.matchMedia, vous devrez donc le créer vous-même.

Jest's mocks manuels fonctionnent avec les limites de modules, c’est-à-dire les instructions require/import afin qu’elles ne soient pas appropriées pour simuler window.matchMedia tel quel, car c’est un global.

Vous avez donc deux options:

  1. Définissez votre propre module matchMedia local qui exporte window.matchMedia. - Cela vous permettrait ensuite de définir une maquette manuelle à utiliser dans votre test.

  2. Définissez un fichier d'installation qui ajoute une maquette pour matchMedia à la fenêtre globale.

Avec l’une ou l’autre de ces options, vous pouvez utiliser un modèle { matchMedia Polyfill } permettant au moins la réalisation de vos tests ou, si vous souhaitez simuler différents états, vous pouvez écrire vos propres ressources configurez-le avec un comportement similaire à Jest fs manual mock

10
riscarrott

Je viens de rencontrer ce problème. Je devais me moquer de ceux-ci dans jestGlobalMocks.ts:

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

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

les documents jest ont maintenant une solution de contournement "officielle":

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

Méthodes de mocking qui ne sont pas implémentées dans JSDOM

7
Selrond

J'ai essayé tout ce qui précède sans succès. Ajouter matchMedia.js à mocks folder, l’a fait pour moi . Rempli le contenu avec @ techguy2000:

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

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

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

module.exports = window;

puis importé ceci dans setup.js

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

Boom! :)

0
arakno