Dies ist meine erste Erfahrung beim Front-End-Testen. In diesem Projekt verwende ich den Jest-Snapshot-Test und erhalte den Fehler TypeError: window.matchMedia is not a function in meiner Komponente.
Ich gehe durch die Scherzdokumentation, ich fand "manuelle Mocks" Abschnitt, aber ich habe keine Idee darüber, wie man das noch macht.
Ich habe diese Technik benutzt, um eine Menge spöttischer Probleme zu lösen.
%Vor% oder wenn du es ständig nachspionieren willst, kannst du es in deine mocks Datei schreiben, die von deinem package.json aufgerufen wurde:
"setupTestFrameworkScriptFile": "<rootDir>/src/tests/mocks.js",
Jest verwendet jsdom , um eine Browserumgebung zu erstellen. JSDom unterstützt jedoch nicht window.matchMedia , so dass Sie es selbst erstellen müssen.
Jests manuelle Mocks arbeiten mit Modulgrenzen, dh erfordern / importieren Anweisungen, damit sie nicht Es ist angemessen, window.matchMedia so zu spielen, wie es ist, weil es global ist.
Sie haben daher zwei Möglichkeiten:
Definieren Sie Ihr eigenes lokales matchMedia-Modul, das window.matchMedia exportiert. - Damit können Sie dann einen manuellen Mock für die Verwendung in Ihrem Test definieren.
Definieren Sie eine Setup-Datei , mit der ein Mock für MatchMedia hinzugefügt wird globales Fenster.
Mit einer dieser Optionen können Sie ein matchMedia-Polyfill als Mock verwenden, der Ihre Tests zumindest erlaubt Um zu laufen oder wenn Sie verschiedene Zustände simulieren mussten, könnten Sie Ihre eigenen mit eigenen Methoden schreiben, die es Ihnen ermöglichen, das Verhalten ähnlich dem Jest zu konfigurieren fs manueller Mock
Ich habe einen MatchMedia-Stub in meine Test-Test-Datei (oberhalb der Tests) eingefügt, wodurch die Tests bestanden werden können:
%Vor%Habe gerade dieses Problem festgestellt. Ich musste diese in jestGlobalMocks.ts nachahmen:
%Vor%