add global mock for the matchMedia function

Signed-off-by: Augustin Husson <husson.augustin@gmail.com>

web/ui/react-app/src/hooks/useMedia.ts

@@ -9,7 +9,7 @@ const useMedia = (query: string): boolean => {
     const handler = () => setMatches(mediaQuery.matches);
     mediaQuery.addEventListener('change', handler);
     return () => mediaQuery.removeEventListener('change', handler);
-  }, []);
+  }, [mediaQuery]);
 
   return matches;
 };

web/ui/react-app/src/pages/graph/Graph.test.tsx

@@ -10,7 +10,7 @@ describe('Graph', () => {
     jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb: any) => cb());
   });
 
-  // fix coming from https://github.com/maslianok/react-resize-detector#testing-with-enzyme-and-jest
+  // Source: https://github.com/maslianok/react-resize-detector#testing-with-enzyme-and-jest
   beforeEach(() => {
     window.ResizeObserver = jest.fn().mockImplementation(() => ({
       observe: jest.fn(),
@@ -22,6 +22,7 @@ describe('Graph', () => {
   afterEach(() => {
     window.ResizeObserver = ResizeObserver;
   });
+
   describe('data is returned', () => {
     const props: any = {
       queryParams: {

web/ui/react-app/src/setupTests.ts

@@ -10,6 +10,22 @@ const customGlobal: GlobalWithFetchMock = global as GlobalWithFetchMock;
 customGlobal.fetch = require('jest-fetch-mock');
 customGlobal.fetchMock = customGlobal.fetch;
 
+// https://stackoverflow.com/questions/39830580/jest-test-fails-typeerror-window-matchmedia-is-not-a-function
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+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(),
+  })),
+});
+
 // CodeMirror in the expression input requires this DOM API. When we upgrade react-scripts
 // and the associated Jest deps, hopefully this won't be needed anymore.
 document.getSelection = function () {