Test się nie powiódł: TypeError: window.matchMedia nie jest funkcją

Question

To jest moje pierwsze doświadczenie z testów front-end. W tym projekcie używam testowania snapshotów i otrzymałem komunikat o błędzie TypeError: window.matchMedia is not a function w moim komponencie.

Przechodzę przez dokumentację, znalazłem sekcję "Manual mocks", ale nie mam pojęcia, jak to zrobić.

Answer 1

Jest używany do tworzenia środowiska przeglądarki. JSDom nie obsługuje jednak window.matchMedia, więc będziesz musiał sam go utworzyć.

Jest to manual mocks praca z granicami modułów, tj. Instrukcje wymagające/importujące, więc nie byłoby odpowiednie naśmiewanie się z window.matchMedia, ponieważ jest to globalne.

więc masz dwie opcje:

1. zdefiniować własny lokalny moduł matchMedia które wywozi window.matchMedia. - Pozwoliłoby to na zdefiniowanie ręcznego makiety do użycia w teście.

2. Zdefiniuj setup file, która dodaje makietę dla matchMedia do globalnego okna.

z którymkolwiek z tych opcji można użyć matchMedia polyfill jako mock który przynajmniej pozwoli swoje badania, aby uruchomić lub jeśli potrzebne do symulacji różnych stanów może chcesz napisać własne z metody prywatne co pozwala na skonfigurować to zachowanie podobne do żartem fs manual mock

Answer 2

kładę niedopałek matchMedia w moim pliku testowego jest (powyżej testów), co pozwala na testy do pass:

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

Answer 3

używałem tej techniki do rozwiązać kilka mockich problemy.

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

lub jeśli chcesz wyśmiewać go cały czas, można umieścić wewnątrz pliku mocks wybierane z package.json: "setupTestFrameworkScriptFile": "<rootDir>/src/tests/mocks.js",

ref: setupTestFrameworkScriptFile