Support Node 18

.drone.yml

@@ -11,8 +11,9 @@ platform:
 
 steps:
   - name: initialize
-    image: grafana/grafana-plugin-ci:1.5.1-alpine
+    image: grafana/grafana-plugin-ci:1.9.5
     commands:
+      - . ~/.init-nvm.sh
       - mkdir -p bin
       - curl -fL -o bin/grabpl https://grafana-downloads.storage.googleapis.com/grafana-build-pipeline/v0.5.27/grabpl
       - chmod +x bin/grabpl
@@ -21,16 +22,17 @@ steps:
       - rm -rf node_modules/@grafana/data/node_modules
 
   - name: build-and-test-frontend
-    image: grafana/grafana-plugin-ci:1.5.1-alpine
+    image: grafana/grafana-plugin-ci:1.9.5
     commands:
+      - . ~/.init-nvm.sh
       - yarn eslint ./src --ext .js,.jsx,.ts,.tsx
       - yarn build
-      - yarn test-ci
+      - yarn test:ci
     depends_on:
       - initialize
 
 ---
 kind: signature
-hmac: 4f7eaf8336ad46a783436864368ed391cb4aade800bf4cc586df0c9cbfcc97e3
+hmac: 16f1768e2d0075f7fb84f8766c2995371afe84ffbc15d06e90dfa7f8ed8ff97d
 
 ...

.github/workflows/publish-npm.yml

@@ -27,9 +27,9 @@ jobs:
 
       - name: Setup .npmrc file for NPM registry
         if: steps.version_check.outputs.changed == 'true'
-        uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
@@ -48,9 +48,9 @@ jobs:
 
       - name: Setup .npmrc file for GitHub Packages
         if: steps.version_check.outputs.changed == 'true'
-        uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
           registry-url: 'https://npm.pkg.github.com'
           scope: '@grafana'
 

.nvmrc

@@ -0,0 +1 @@
+18

jest.config.js

@@ -1,13 +1,31 @@
 // This file is needed because it is used by vscode and other tools that
 // call `jest` directly.  However, unless you are doing anything special
 // do not edit this file
+module.exports = {
+  modulePaths: ['<rootDir>/src'],
+  setupFilesAfterEnv: ['<rootDir>/src/tests/setupTests.ts'],
+  testEnvironment: 'jest-environment-jsdom',
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
+  ],
+  transform: {
+    '^.+\\.(t|j)sx?$': [
+      '@swc/jest',
+      {
+        sourceMaps: true,
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            decorators: false,
+            dynamicImport: true,
+          },
+        },
+      },
+    ],
+  },
+  transformIgnorePatterns: [],
+};
 
-const standard = require('@grafana/toolkit/src/config/jest.plugin.config');
-
-const config = standard.jestConfig();
-
-// allows us to have our own custom set up test file
-config.setupFilesAfterEnv = ['<rootDir>/src/tests/setupTests.ts'];
-
-// This process will use the same config that `yarn test` is using
-module.exports = config;

package.json

@@ -17,7 +17,7 @@
     "typecheck": "tsc -p ./tsconfig.build.json",
     "test": "jest --notify --watch",
     "test:coverage": "jest --coverage",
-    "test-ci": "grafana-toolkit plugin:test"
+    "test:ci": "jest"
   },
   "files": [
     "dist"
@@ -31,10 +31,12 @@
   },
   "devDependencies": {
     "@grafana/data": "9.4.14",
+    "@grafana/eslint-config": "^6.0.1",
     "@grafana/runtime": "9.4.14",
-    "@grafana/toolkit": "9.4.14",
     "@grafana/ui": "9.4.14",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@swc/core": "^1.3.93",
+    "@swc/jest": "^0.2.29",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
@@ -43,7 +45,12 @@
     "@types/node": "16.18.6",
     "@types/react": "17.0.42",
     "@types/react-dom": "17.0.14",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
     "esbuild": "^0.16.2",
+    "eslint": "^8.49.0",
+    "eslint-plugin-jsdoc": "^46.7.0",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "27.5.1",
     "node-notifier": "^10.0.1",
     "react": "17.0.2",

src/tests/setupTests.ts

@@ -1,2 +1,17 @@
 // enables assertions such as toBeInTheDocument to be used in our tests
 import '@testing-library/jest-dom';
+
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+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(),
+  })),
+});