ReferenceError: matchMedia is not defined

[simPod]

What happened:

Upgraded @grafana/* package from v8.0.2 to anything 8.0.3+.

Got error while running tests:

    ReferenceError: matchMedia is not defined

      1 | import { isDataFrame } from '@grafana/data';
      2 | import { DateTime } from '@grafana/data/datetime/moment_wrapper';
    > 3 | import { BackendSrv, getBackendSrv, getTemplateSrv, setBackendSrv, setTemplateSrv } from '@grafana/runtime';
        | ^
      4 | import { DataSource } from '../src/DataSource';
      5 | import { Format } from '../src/format';
      6 | import { QueryRequest } from '../src/types';

      at setPxRatio (node_modules/@grafana/ui/index.development.js:109545:2)
      at Object.<anonymous> (node_modules/@grafana/ui/index.development.js:109603:1)
      at Object.<anonymous> (node_modules/@grafana/ui/index.js:6:20)
      at Object.<anonymous> (node_modules/@grafana/aws-sdk/dist/index.development.js:13:10)
      at Object.<anonymous> (node_modules/@grafana/aws-sdk/index.js:6:20)
      at Object.<anonymous> (node_modules/@grafana/runtime/node_modules/@grafana/ui/index.development.js:11:14)
      at Object.<anonymous> (node_modules/@grafana/runtime/node_modules/@grafana/ui/index.js:6:20)
      at Object.<anonymous> (node_modules/@grafana/runtime/index.development.js:9:10)
      at Object.<anonymous> (node_modules/@grafana/runtime/index.js:6:20)
      at Object.<anonymous> (spec/DataSource.jest.ts:3:1)

What you expected to happen:

Ok

How to reproduce it (as minimally and precisely as possible):

See this commit simPod/GrafanaJsonDatasource@880cd57, there's also CI

[rvdwijngaard]

+1 having the same issue

[zoltanbedi]

Until this is fixed. As a workaround you can create a file inside a config folder called jest-setup so config/jest-setup.ts with this content:

Object.defineProperty(global, '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(),
  })),
});

That should resolve this issue.