La prueba de Jest falla: TypeError: window.matchMedia no es una función

Te sugerimos que revises esta solución en un ambiente controlado antes de pasarlo a producción, saludos.

Solución:

La documentación de Jest ahora tiene una solución “oficial”:

Object.defineProperty(window, 'matchMedia', 
  writable: true,
  value: jest.fn().mockImplementation(query => (
    matches: false,
    media: query,
    onchange: null,
    addListener: jest.fn(), // Deprecated
    removeListener: jest.fn(), // Deprecated
    addEventListener: jest.fn(),
    removeEventListener: jest.fn(),
    dispatchEvent: jest.fn(),
  )),
);

Métodos de burla que no están implementados en JSDOM

He estado usando esta técnica para resolver un montón de problemas de burla.

describe("Test", () => 
  beforeAll(() => 
    Object.defineProperty(window, "matchMedia", 
      writable: true,
      value: jest.fn().mockImplementation(query => (
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(), // Deprecated
        removeListener: jest.fn(), // Deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
      ))
    );
  );
);

O, si quiere burlarse de él todo el tiempo, puede poner dentro de su mocks archivo llamado desde su package.json:
"setupFilesAfterEnv": "/src/tests/mocks.js",.

Referencia: setupTestFrameworkScriptFile

Yo puse un MatchMedia stub en mi archivo de prueba Jest (arriba de las pruebas), lo que permite que pasen las pruebas:

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

Recuerda que puedes dar visibilidad a esta sección si te valió la pena.

---

---

Utiliza Nuestro Buscador