diff --git a/web/ui/react-app/src/hooks/useMedia.ts b/web/ui/react-app/src/hooks/useMedia.ts index e0c8495ff..7d542987a 100644 --- a/web/ui/react-app/src/hooks/useMedia.ts +++ b/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; }; diff --git a/web/ui/react-app/src/pages/graph/Graph.test.tsx b/web/ui/react-app/src/pages/graph/Graph.test.tsx index c4f16064e..582aa5a4f 100644 --- a/web/ui/react-app/src/pages/graph/Graph.test.tsx +++ b/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: { diff --git a/web/ui/react-app/src/setupTests.ts b/web/ui/react-app/src/setupTests.ts index 83dd83adf..f4d3d39b6 100644 --- a/web/ui/react-app/src/setupTests.ts +++ b/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 () {