Frontend: Decouple unit tests for decoupled plugins from core (#107942)

* test(frontend): ignore azuremonitor tests in root jest config

* test(loki): increase waitfor in monacofieldwrapper test

* feat(plugin-configs): introduce jest config

* feat(azuremonitor): add jest config and test scripts

* ci(pr-frontend-unit-tests): introduce separate decoupled plugin test job

* ci(pr-frontend-unit-tests): run decoupled-plugin tests regardless of fork

* Wip

* test(decoupled-plugins): decouple tests in all plugins except loki and mssql

* test(frontend): ignore decoupled plugins that run their own tests

* test(stackdriver): update snapshot due to reactinlinesvg mock difference

* chore(yarn): update lock file

* chore(plugin-configs): remove create-plugin comments

* ci(frontend-unit-tests): make them run on pr or merge to main

* chore(decoupled-plugins): add plugin:test:ci command for locally running all tests

* ci(frontend-unit-tests): run test:ci instead of calling nx directly

* chore(decoupled-plugins): fix jest-dom types for loki and testdata

.github/workflows/pr-frontend-unit-tests.yml

@@ -90,6 +90,23 @@ jobs:
         TEST_SHARD: ${{ matrix.chunk }}
         TEST_SHARD_TOTAL: 8
 
+  frontend-decoupled-plugin-tests:
+    needs: detect-changes
+    if: needs.detect-changes.outputs.changed == 'true'
+    runs-on: ubuntu-latest-8-cores
+    name: "Decoupled plugin tests"
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        persist-credentials: false
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+        cache: 'yarn'
+        cache-dependency-path: 'yarn.lock'
+    - run: yarn install --immutable --check-cache
+    - run: yarn run plugin:test:ci
+
   # This is the job that is actually required by rulesets.
   # We need to require EITHER the OSS or the Enterprise job to pass.
   # However, if one is skipped, GitHub won't flat-map the shards,
@@ -98,6 +115,7 @@ jobs:
     needs:
       - frontend-unit-tests
       - frontend-unit-tests-enterprise
+      - frontend-decoupled-plugin-tests
     # always() is the best function here.
     # success() || failure() will skip this function if any need is also skipped.
     # That means conditional test suites will fail the entire requirement check.

jest.config.js

@@ -74,4 +74,19 @@ module.exports = {
   // Log the test results with dynamic Loki tags. Drone CI only
   reporters: ['default', ['<rootDir>/public/test/log-reporter.js', { enable: process.env.DRONE === 'true' }]],
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    // Decoupled plugins run their own tests so ignoring them here.
+    '<rootDir>/public/app/plugins/datasource/azuremonitor',
+    '<rootDir>/public/app/plugins/datasource/cloud-monitoring',
+    '<rootDir>/public/app/plugins/datasource/grafana-postgresql-datasource',
+    '<rootDir>/public/app/plugins/datasource/grafana-pyroscope-datasource',
+    '<rootDir>/public/app/plugins/datasource/grafana-testdata-datasource',
+    '<rootDir>/public/app/plugins/datasource/jaeger',
+    '<rootDir>/public/app/plugins/datasource/mysql',
+    '<rootDir>/public/app/plugins/datasource/parca',
+    '<rootDir>/public/app/plugins/datasource/tempo',
+    '<rootDir>/public/app/plugins/datasource/zipkin',
+  ],
+  projects: ['<rootDir>'],
 };

package.json

@@ -33,10 +33,10 @@
     "test:coverage": "jest --coverage",
     "test:coverage:changes": "jest --coverage --changedSince=origin/main",
     "test:accessibility-report": "./scripts/generate-a11y-report.sh",
+    "test:ci": "mkdir -p reports/junit && JEST_JUNIT_OUTPUT_DIR=reports/junit jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%} --shard=${TEST_SHARD:-1}/${TEST_SHARD_TOTAL:-1}",
     "lint": "yarn run lint:ts && yarn run lint:sass",
     "lint:ts": "eslint ./ ./public/app/extensions/ --cache --no-error-on-unmatched-pattern",
     "lint:sass": "yarn stylelint '{public/sass,packages}/**/*.scss' --cache",
-    "test:ci": "mkdir -p reports/junit && JEST_JUNIT_OUTPUT_DIR=reports/junit jest --ci --reporters=default --reporters=jest-junit -w ${TEST_MAX_WORKERS:-100%} --shard=${TEST_SHARD:-1}/${TEST_SHARD_TOTAL:-1}",
     "lint:fix": "yarn lint:ts --fix",
     "packages:build": "nx run-many -t build --projects='tag:scope:package'",
     "packages:clean": "rimraf ./npm-artifacts && nx run-many -t clean --projects='tag:scope:package' --maxParallel=100",
@@ -59,7 +59,6 @@
     "typecheck": "tsc --noEmit && yarn run packages:typecheck",
     "plugins:build-bundled": "echo 'bundled plugins are no longer supported'",
     "watch": "yarn start -d watch,start core:start --watchTheme",
-    "ci:test-frontend": "yarn run test:ci",
     "i18n:stats": "node ./scripts/cli/reportI18nStats.mjs",
     "i18n-extract": "make i18n-extract",
     "betterer": "betterer --tsconfig ./scripts/cli/tsconfig.json",
@@ -69,6 +68,7 @@
     "plugin:build": "nx run-many -t build --projects='tag:scope:plugin'",
     "plugin:build:commit": "nx run-many -t build:commit --projects='tag:scope:plugin'",
     "plugin:build:dev": "nx run-many -t dev --projects='tag:scope:plugin' --maxParallel=100",
+    "plugin:test:ci": "nx run-many -t test:ci --projects='tag:scope:plugin'",
     "plugin:i18n-extract": "nx run-many -t i18n-extract --projects='tag:scope:plugin'",
     "process-specs": "node --experimental-strip-types scripts/process-specs.ts",
     "generate-apis": "yarn process-specs && rtk-query-codegen-openapi ./scripts/generate-rtk-apis.ts",

packages/grafana-plugin-configs/jest/jest-setup.js

@@ -0,0 +1,82 @@
+import '@testing-library/jest-dom';
+import { TextEncoder, TextDecoder } from 'util';
+
+Object.assign(global, { TextDecoder, TextEncoder });
+
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(global, 'matchMedia', {
+  writable: true,
+  value: (query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  }),
+});
+
+const mockIntersectionObserver = jest.fn().mockImplementation((callback) => ({
+  observe: jest.fn().mockImplementation((elem) => {
+    callback([{ target: elem, isIntersecting: true }]);
+  }),
+  unobserve: jest.fn(),
+  disconnect: jest.fn(),
+}));
+global.IntersectionObserver = mockIntersectionObserver;
+
+Object.defineProperty(document, 'fonts', {
+  value: { ready: Promise.resolve({}) },
+});
+
+// Used by useMeasure
+global.ResizeObserver = class ResizeObserver {
+  static #observationEntry = {
+    contentRect: {
+      x: 1,
+      y: 2,
+      width: 500,
+      height: 500,
+      top: 100,
+      bottom: 0,
+      left: 100,
+      right: 0,
+    },
+    target: {
+      // Needed for react-virtual to work in tests
+      getAttribute: () => 1,
+    },
+  };
+
+  #isObserving = false;
+  #callback;
+
+  constructor(callback) {
+    this.#callback = callback;
+  }
+
+  #emitObservation() {
+    setTimeout(() => {
+      if (!this.#isObserving) {
+        return;
+      }
+
+      this.#callback([ResizeObserver.#observationEntry], this);
+    });
+  }
+
+  observe() {
+    this.#isObserving = true;
+    this.#emitObservation();
+  }
+
+  disconnect() {
+    this.#isObserving = false;
+  }
+
+  unobserve() {
+    this.#isObserving = false;
+  }
+};

packages/grafana-plugin-configs/jest/jest.config.js

@@ -0,0 +1,46 @@
+process.env.TZ = 'Pacific/Easter'; // UTC-06:00 or UTC-05:00 depending on daylight savings
+
+import path from 'path';
+
+import { grafanaESModules, nodeModulesToTransform } from './utils.js';
+
+export default {
+  moduleNameMapper: {
+    '\\.(css|scss|sass)$': 'identity-obj-proxy',
+    'react-inlinesvg': path.resolve(import.meta.dirname, 'mocks', 'react-inlinesvg.tsx'),
+    '\\.(svg|png|jpg)': path.resolve(import.meta.dirname, 'mocks', 'images.ts'),
+    '^monaco-editor$': 'monaco-editor/esm/vs/editor/editor.api.js',
+    '@kusto/monaco-kusto': '@kusto/monaco-kusto/release/esm/monaco.contribution.js',
+  },
+  modulePaths: ['<rootDir>'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'cjs'],
+  setupFiles: ['jest-canvas-mock'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
+  testEnvironment: 'jsdom',
+  testMatch: ['<rootDir>/**/__tests__/**/*.{js,jsx,ts,tsx}', '<rootDir>/**/*.{spec,test,jest}.{js,jsx,ts,tsx}'],
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        sourceMaps: 'inline',
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            decorators: false,
+            dynamicImport: true,
+          },
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    ],
+  },
+  // Jest will throw `Cannot use import statement outside module` if it tries to load an
+  // ES module without it being transformed first. ./config/README.md#esm-errors-with-jest
+  transformIgnorePatterns: [nodeModulesToTransform(grafanaESModules)],
+  watchPathIgnorePatterns: ['<rootDir>/node_modules', '<rootDir>/dist'],
+};

packages/grafana-plugin-configs/jest/mocks/images.ts

@@ -0,0 +1 @@
+export default '__DEFAULT_MOCK_IMAGE_CONTENT__';

packages/grafana-plugin-configs/jest/mocks/react-inlinesvg.tsx

@@ -0,0 +1,25 @@
+// Due to the grafana/ui Icon component making fetch requests to
+// `/public/img/icon/<icon_name>.svg` we need to mock react-inlinesvg to prevent
+// the failed fetch requests from displaying errors in console.
+
+import { Ref } from 'react';
+
+type Callback = (...args: unknown[]) => void;
+
+export interface StorageItem {
+  content: string;
+  queue: Callback[];
+  status: string;
+}
+
+export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
+
+const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;
+
+const InlineSVG = ({ src, innerRef, ...rest }: { src: string; innerRef: Ref<SVGSVGElement> }) => {
+  // testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
+  const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
+  return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} viewBox="0 0 24 24" ref={innerRef} {...rest} />;
+};
+
+export default InlineSVG;

packages/grafana-plugin-configs/jest/utils.js

@@ -0,0 +1,31 @@
+export const nodeModulesToTransform = (moduleNames) => `.*\/node_modules\/(?!.*(${moduleNames.join('|')})\/.*)`;
+
+// Array of known nested grafana package dependencies that only bundle an ESM version
+export const grafanaESModules = [
+  '@glideapps/glide-data-grid',
+  '@wojtekmaj/date-utils',
+  'ol',
+  'd3',
+  'd3-color',
+  'd3-interpolate',
+  'delaunator',
+  'get-user-locale',
+  'internmap',
+  'robust-predicates',
+  'leven',
+  'nanoid',
+  'marked',
+  'memoize',
+  'mimic-function',
+  'monaco-promql',
+  'react-calendar',
+  '@kusto/monaco-kusto',
+  'monaco-editor',
+  '@msagl',
+  'lodash-es',
+  'vscode-languageserver-types',
+  '@bsull/augurs',
+  'react-data-grid',
+  '@grafana/llm',
+  'pkce-challenge',
+];

packages/grafana-plugin-configs/package.json

@@ -10,6 +10,8 @@
   "devDependencies": {
     "@grafana/tsconfig": "^2.0.0",
     "@swc/core": "1.10.12",
+    "@swc/helpers": "^0.5.0",
+    "@swc/jest": "^0.2.26",
     "@types/eslint": "9.6.1",
     "@types/webpack-bundle-analyzer": "^4.7.0",
     "copy-webpack-plugin": "12.0.2",
@@ -17,7 +19,10 @@
     "eslint-webpack-plugin": "4.2.0",
     "fork-ts-checker-webpack-plugin": "9.0.2",
     "glob": "11.0.3",
+    "identity-obj-proxy": "^3.0.0",
     "imports-loader": "^5.0.0",
+    "jest-canvas-mock": "2.5.2",
+    "jest-environment-jsdom": "29.7.0",
     "replace-in-file-webpack-plugin": "1.0.6",
     "swc-loader": "0.2.6",
     "typescript": "5.8.3",

public/app/plugins/datasource/azuremonitor/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/azuremonitor/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/azuremonitor/package.json

@@ -39,6 +39,7 @@
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "i18next-parser": "9.3.0",
+    "jest": "29.7.0",
     "react-select-event": "5.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
@@ -51,7 +52,9 @@
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
     "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
-    "i18n-extract": "i18next --config locales/i18next-parser.config.cjs"
+    "i18n-extract": "i18next --config locales/i18next-parser.config.cjs",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap

@@ -72,11 +72,13 @@ exports[`VariableQueryEditor renders correctly 1`] = `
               <svg
                 aria-hidden="true"
                 class="css-1d3xu67-Icon"
+                data-testid="angle-down"
                 height="16"
-                id="public/build/img/icons/unicons/angle-down.svg"
                 loader="[object Object]"
                 title=""
+                viewBox="0 0 24 24"
                 width="16"
+                xmlns="http://www.w3.org/2000/svg"
               />
             </div>
           </div>

public/app/plugins/datasource/cloud-monitoring/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/cloud-monitoring/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/cloud-monitoring/package.json

@@ -39,6 +39,7 @@
     "@types/prismjs": "1.26.5",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
+    "jest": "29.7.0",
     "react-select-event": "5.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
@@ -50,7 +51,9 @@
   "scripts": {
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/grafana-postgresql-datasource/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/grafana-postgresql-datasource/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/grafana-postgresql-datasource/package.json

@@ -25,6 +25,7 @@
     "@types/lodash": "4.17.20",
     "@types/node": "22.15.0",
     "@types/react": "18.3.18",
+    "jest": "29.7.0",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
     "webpack": "5.97.1"
@@ -35,7 +36,9 @@
   "scripts": {
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/grafana-pyroscope-datasource/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/grafana-pyroscope-datasource/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/grafana-pyroscope-datasource/package.json

@@ -44,7 +44,9 @@
   "scripts": {
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/grafana-testdata-datasource/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/grafana-testdata-datasource/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/grafana-testdata-datasource/package.json

@@ -24,6 +24,7 @@
     "@grafana/e2e-selectors": "12.1.0-pre",
     "@grafana/plugin-configs": "12.1.0-pre",
     "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
     "@types/d3-random": "^3.0.2",
@@ -33,6 +34,7 @@
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "@types/uuid": "10.0.0",
+    "jest": "29.7.0",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
     "webpack": "5.97.1"
@@ -43,7 +45,9 @@
   "scripts": {
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/grafana-testdata-datasource/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
   "extends": "@grafana/plugin-configs/tsconfig.json",
   "include": ["."]

public/app/plugins/datasource/jaeger/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/jaeger/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/jaeger/package.json

@@ -36,6 +36,7 @@
     "@types/react-dom": "18.3.5",
     "@types/react-window": "1.8.8",
     "@types/uuid": "10.0.0",
+    "jest": "29.7.0",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
     "webpack": "5.97.1"
@@ -46,7 +47,9 @@
   "scripts": {
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/loki/components/monaco-query-field/MonacoFieldWrapper.test.tsx

@@ -32,9 +32,14 @@ describe('MonacoFieldWrapper', () => {
   test('Renders with no errors', async () => {
     renderComponent();
 
-    await waitFor(async () => {
-      const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
-      expect(monacoEditor).toBeInTheDocument();
-    });
+    await waitFor(
+      async () => {
+        const monacoEditor = await screen.findByTestId(selectors.components.ReactMonacoEditor.editorLazy);
+        expect(monacoEditor).toBeInTheDocument();
+      },
+      {
+        timeout: 10000,
+      }
+    );
   });
 });

public/app/plugins/datasource/loki/package.json

@@ -27,6 +27,7 @@
     "@grafana/e2e-selectors": "12.1.0-pre",
     "@grafana/plugin-configs": "12.1.0-pre",
     "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@testing-library/user-event": "14.6.1",
     "@types/d3-random": "^3.0.2",

public/app/plugins/datasource/loki/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["node", "jest", "@testing-library/jest-dom"]
   },
   "extends": "@grafana/plugin-configs/tsconfig.json",
   "include": ["."]

public/app/plugins/datasource/mysql/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/mysql/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/mysql/package.json

@@ -25,6 +25,7 @@
     "@types/lodash": "4.17.20",
     "@types/node": "22.15.0",
     "@types/react": "18.3.18",
+    "jest": "29.7.0",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
     "webpack": "5.97.1"
@@ -35,7 +36,9 @@
   "scripts": {
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/parca/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/parca/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/parca/package.json

@@ -26,6 +26,7 @@
     "@types/node": "22.15.0",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
+    "jest": "29.7.0",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
     "webpack": "5.97.1"
@@ -36,7 +37,9 @@
   "scripts": {
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/tempo/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/tempo/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/tempo/package.json

@@ -52,6 +52,7 @@
     "@types/semver": "7.7.0",
     "@types/uuid": "10.0.0",
     "glob": "11.0.3",
+    "jest": "29.7.0",
     "react-select-event": "5.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
@@ -64,7 +65,9 @@
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:stats": "yarn build --env stats --profile --json=compilation-stats.json",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

public/app/plugins/datasource/zipkin/jest-setup.js

@@ -0,0 +1 @@
+import '@grafana/plugin-configs/jest/jest-setup.js';

public/app/plugins/datasource/zipkin/jest.config.js

@@ -0,0 +1,3 @@
+import defaultConfig from '@grafana/plugin-configs/jest/jest.config.js';
+
+export default defaultConfig;

public/app/plugins/datasource/zipkin/package.json

@@ -29,6 +29,7 @@
     "@types/node": "22.15.0",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
+    "jest": "29.7.0",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
     "webpack": "5.97.1"
@@ -39,7 +40,9 @@
   "scripts": {
     "build": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production",
     "build:commit": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -c ./webpack.config.ts --env production --env commit=$(git rev-parse --short HEAD)",
-    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development"
+    "dev": "NODE_OPTIONS='--experimental-strip-types --no-warnings=ExperimentalWarning' webpack -w -c ./webpack.config.ts --env development",
+    "test": "jest --watch --onlyChanged",
+    "test:ci": "jest --maxWorkers 4"
   },
   "packageManager": "yarn@4.9.2"
 }

yarn.lock

@@ -2550,6 +2550,7 @@ __metadata:
     i18next: "npm:^25.0.0"
     i18next-parser: "npm:9.3.0"
     immer: "npm:10.1.1"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     monaco-editor: "npm:0.34.1"
     prismjs: "npm:1.30.0"
@@ -2587,6 +2588,7 @@ __metadata:
     "@types/lodash": "npm:4.17.20"
     "@types/node": "npm:22.15.0"
     "@types/react": "npm:18.3.18"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     react: "npm:18.3.1"
     rxjs: "npm:7.8.2"
@@ -2651,6 +2653,7 @@ __metadata:
     "@grafana/schema": "npm:12.1.0-pre"
     "@grafana/ui": "npm:12.1.0-pre"
     "@testing-library/dom": "npm:10.4.0"
+    "@testing-library/jest-dom": "npm:6.6.3"
     "@testing-library/react": "npm:16.2.0"
     "@testing-library/user-event": "npm:14.6.1"
     "@types/d3-random": "npm:^3.0.2"
@@ -2661,6 +2664,7 @@ __metadata:
     "@types/react-dom": "npm:18.3.5"
     "@types/uuid": "npm:10.0.0"
     d3-random: "npm:^3.0.1"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     micro-memoize: "npm:^4.1.2"
     react: "npm:18.3.1"
@@ -2702,6 +2706,7 @@ __metadata:
     "@types/react-dom": "npm:18.3.5"
     "@types/react-window": "npm:1.8.8"
     "@types/uuid": "npm:10.0.0"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     logfmt: "npm:^1.3.2"
     react: "npm:18.3.1"
@@ -2735,6 +2740,7 @@ __metadata:
     "@grafana/schema": "npm:12.1.0-pre"
     "@grafana/ui": "npm:12.1.0-pre"
     "@testing-library/dom": "npm:10.4.0"
+    "@testing-library/jest-dom": "npm:6.6.3"
     "@testing-library/react": "npm:16.2.0"
     "@testing-library/user-event": "npm:14.6.1"
     "@types/d3-random": "npm:^3.0.2"
@@ -2814,6 +2820,7 @@ __metadata:
     "@types/lodash": "npm:4.17.20"
     "@types/node": "npm:22.15.0"
     "@types/react": "npm:18.3.18"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     react: "npm:18.3.1"
     rxjs: "npm:7.8.2"
@@ -2843,6 +2850,7 @@ __metadata:
     "@types/node": "npm:22.15.0"
     "@types/react": "npm:18.3.18"
     "@types/react-dom": "npm:18.3.5"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     monaco-editor: "npm:0.34.1"
     react: "npm:18.3.1"
@@ -2886,6 +2894,7 @@ __metadata:
     fast-deep-equal: "npm:^3.1.3"
     i18next: "npm:^25.0.0"
     immer: "npm:10.1.1"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     monaco-editor: "npm:0.34.1"
     prismjs: "npm:1.30.0"
@@ -2940,6 +2949,7 @@ __metadata:
     events: "npm:3.3.0"
     glob: "npm:11.0.3"
     i18next: "npm:^25.0.0"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     lru-cache: "npm:11.1.0"
     monaco-editor: "npm:0.34.1"
@@ -2983,6 +2993,7 @@ __metadata:
     "@types/node": "npm:22.15.0"
     "@types/react": "npm:18.3.18"
     "@types/react-dom": "npm:18.3.5"
+    jest: "npm:29.7.0"
     lodash: "npm:4.17.21"
     react: "npm:18.3.1"
     react-dom: "npm:18.3.1"
@@ -3375,6 +3386,8 @@ __metadata:
   dependencies:
     "@grafana/tsconfig": "npm:^2.0.0"
     "@swc/core": "npm:1.10.12"
+    "@swc/helpers": "npm:^0.5.0"
+    "@swc/jest": "npm:^0.2.26"
     "@types/eslint": "npm:9.6.1"
     "@types/webpack-bundle-analyzer": "npm:^4.7.0"
     copy-webpack-plugin: "npm:12.0.2"
@@ -3382,7 +3395,10 @@ __metadata:
     eslint-webpack-plugin: "npm:4.2.0"
     fork-ts-checker-webpack-plugin: "npm:9.0.2"
     glob: "npm:11.0.3"
+    identity-obj-proxy: "npm:^3.0.0"
     imports-loader: "npm:^5.0.0"
+    jest-canvas-mock: "npm:2.5.2"
+    jest-environment-jsdom: "npm:29.7.0"
     replace-in-file-webpack-plugin: "npm:1.0.6"
     swc-loader: "npm:0.2.6"
     tslib: "npm:2.8.1"
@@ -4107,6 +4123,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/create-cache-key-function@npm:^30.0.0":
+  version: 30.0.2
+  resolution: "@jest/create-cache-key-function@npm:30.0.2"
+  dependencies:
+    "@jest/types": "npm:30.0.1"
+  checksum: 10/bda1a28d131b37d7f7023c9f1c36ac791b9b17696668e63a8be525e4b95a05bc3e4232f29bcf727bd49f1026f0cacacea16fa1723f76686121c8574da0984906
+  languageName: node
+  linkType: hard
+
 "@jest/environment@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/environment@npm:29.7.0"
@@ -4164,6 +4189,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/pattern@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/pattern@npm:30.0.1"
+  dependencies:
+    "@types/node": "npm:*"
+    jest-regex-util: "npm:30.0.1"
+  checksum: 10/afd03b4d3eadc9c9970cf924955dee47984a7e767901fe6fa463b17b246f0ddeec07b3e82c09715c54bde3c8abb92074160c0d79967bd23778724f184e7f5b7b
+  languageName: node
+  linkType: hard
+
 "@jest/reporters@npm:^29.7.0":
   version: 29.7.0
   resolution: "@jest/reporters@npm:29.7.0"
@@ -4201,6 +4236,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/schemas@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/schemas@npm:30.0.1"
+  dependencies:
+    "@sinclair/typebox": "npm:^0.34.0"
+  checksum: 10/067d4c3f38f2d8267d3ed6cc813252c3be580035fe7e2c0fa187323ef4978233ebadb1477808aec048440a8d0f480f71f92c5f02f98bf66c59bf802da1a0b254
+  languageName: node
+  linkType: hard
+
 "@jest/schemas@npm:^29.6.3":
   version: 29.6.3
   resolution: "@jest/schemas@npm:29.6.3"
@@ -4268,6 +4312,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/types@npm:30.0.1":
+  version: 30.0.1
+  resolution: "@jest/types@npm:30.0.1"
+  dependencies:
+    "@jest/pattern": "npm:30.0.1"
+    "@jest/schemas": "npm:30.0.1"
+    "@types/istanbul-lib-coverage": "npm:^2.0.6"
+    "@types/istanbul-reports": "npm:^3.0.4"
+    "@types/node": "npm:*"
+    "@types/yargs": "npm:^17.0.33"
+    chalk: "npm:^4.1.2"
+  checksum: 10/43f4ffedfec4d88869d74c259a027e45798444c09e4c52f59a1e7124c43d54e908d7b93d81da5260075d421d6f42087b12cb6c83da580b088c987f9d18b5d879
+  languageName: node
+  linkType: hard
+
 "@jest/types@npm:^29.6.3":
   version: 29.6.3
   resolution: "@jest/types@npm:29.6.3"
@@ -7163,6 +7222,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sinclair/typebox@npm:^0.34.0":
+  version: 0.34.37
+  resolution: "@sinclair/typebox@npm:0.34.37"
+  checksum: 10/bd2ba20a9f7446a353719bc0e6dfab75a13e47af6470fb792e418c585a4eb3bae4f806f87e4067efe2fb0c7686de11e6cf11823a1fe13660892e51cefcfceaea
+  languageName: node
+  linkType: hard
+
 "@sindresorhus/is@npm:^4.6.0":
   version: 4.6.0
   resolution: "@sindresorhus/is@npm:4.6.0"
@@ -8514,6 +8580,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/jest@npm:^0.2.26":
+  version: 0.2.39
+  resolution: "@swc/jest@npm:0.2.39"
+  dependencies:
+    "@jest/create-cache-key-function": "npm:^30.0.0"
+    "@swc/counter": "npm:^0.1.3"
+    jsonc-parser: "npm:^3.2.0"
+  peerDependencies:
+    "@swc/core": "*"
+  checksum: 10/a2b7ed6fbb908867e673d1bbff9efde7eee225a57ad75735216ce2005e40c5cfb92285bd807d2058f1c0317e3d48ed71f5577fe85b28bebc80c1bc2c3a03306e
+  languageName: node
+  linkType: hard
+
 "@swc/types@npm:^0.1.17, @swc/types@npm:^0.1.19":
   version: 0.1.19
   resolution: "@swc/types@npm:0.1.19"
@@ -9501,6 +9580,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/istanbul-lib-coverage@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
+  checksum: 10/3feac423fd3e5449485afac999dcfcb3d44a37c830af898b689fadc65d26526460bedb889db278e0d4d815a670331796494d073a10ee6e3a6526301fe7415778
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-report@npm:*":
   version: 3.0.0
   resolution: "@types/istanbul-lib-report@npm:3.0.0"
@@ -9519,6 +9605,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/istanbul-reports@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "@types/istanbul-reports@npm:3.0.4"
+  dependencies:
+    "@types/istanbul-lib-report": "npm:*"
+  checksum: 10/93eb18835770b3431f68ae9ac1ca91741ab85f7606f310a34b3586b5a34450ec038c3eed7ab19266635499594de52ff73723a54a72a75b9f7d6a956f01edee95
+  languageName: node
+  linkType: hard
+
 "@types/jest@npm:29.5.14, @types/jest@npm:^29.5.4":
   version: 29.5.14
   resolution: "@types/jest@npm:29.5.14"
@@ -10265,7 +10360,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:17.0.33, @types/yargs@npm:^17.0.8":
+"@types/yargs@npm:17.0.33, @types/yargs@npm:^17.0.33, @types/yargs@npm:^17.0.8":
   version: 17.0.33
   resolution: "@types/yargs@npm:17.0.33"
   dependencies:
@@ -18508,6 +18603,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"harmony-reflect@npm:^1.4.6":
+  version: 1.6.2
+  resolution: "harmony-reflect@npm:1.6.2"
+  checksum: 10/69d30ebfb5dbd6ff0553725c7922404cf1dfe5390db1618298eed27fe6c9bd2f3f677727e9da969d21648f4a6a39041e2f46e99976be4385f9e34bac23058cd4
+  languageName: node
+  linkType: hard
+
 "has-bigints@npm:^1.0.2":
   version: 1.0.2
   resolution: "has-bigints@npm:1.0.2"
@@ -19263,6 +19365,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"identity-obj-proxy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "identity-obj-proxy@npm:3.0.0"
+  dependencies:
+    harmony-reflect: "npm:^1.4.6"
+  checksum: 10/66fe4d2ffc67655174f6abe100ab3b36d2f5e4de5b28a7c3121e5f51bd4e7c8c1bee4f9a41ce0586ace57fb63bfedbfc39508b7cb43b9e3ed6dc42f762158b4e
+  languageName: node
+  linkType: hard
+
 "ieee754@npm:^1.1.13, ieee754@npm:^1.2.1":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"
@@ -20787,6 +20898,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jest-regex-util@npm:30.0.1":
+  version: 30.0.1
+  resolution: "jest-regex-util@npm:30.0.1"
+  checksum: 10/fa8dac80c3e94db20d5e1e51d1bdf101cf5ede8f4e0b8f395ba8b8ea81e71804ffd747452a6bb6413032865de98ac656ef8ae43eddd18d980b6442a2764ed562
+  languageName: node
+  linkType: hard
+
 "jest-regex-util@npm:^29.0.0, jest-regex-util@npm:^29.6.3":
   version: 29.6.3
   resolution: "jest-regex-util@npm:29.6.3"
@@ -21340,6 +21458,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsonc-parser@npm:^3.2.0":
+  version: 3.3.1
+  resolution: "jsonc-parser@npm:3.3.1"
+  checksum: 10/9b0dc391f20b47378f843ef1e877e73ec652a5bdc3c5fa1f36af0f119a55091d147a86c1ee86a232296f55c929bba174538c2bf0312610e0817a22de131cc3f4
+  languageName: node
+  linkType: hard
+
 "jsonfile@npm:^4.0.0":
   version: 4.0.0
   resolution: "jsonfile@npm:4.0.0"