Chore: Upgrade to jest 28 (#49679)

* bump packages to jest 28

* changes needed for jest 28

* map react-colorful as well

* use customResolver and fix last test

* don't need react-colorful installed if we're using a custom resolver

* return correct thing in mock

* remove watchPathIgnorePatterns since we don't have node_modules anymore

jest.config.js

@@ -12,12 +12,13 @@ module.exports = {
   transformIgnorePatterns: [
     'node_modules/(?!(ol)/)', // <- exclude the open layers library
   ],
-  moduleDirectories: ['node_modules', 'public'],
+  moduleDirectories: ['public'],
   roots: ['<rootDir>/public/app', '<rootDir>/public/test', '<rootDir>/packages'],
   testRegex: '(\\.|/)(test)\\.(jsx?|tsx?)$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   setupFiles: ['jest-canvas-mock', './public/test/jest-shim.ts', './public/test/jest-setup.ts'],
   testTimeout: 30000,
+  resolver: `<rootDir>/public/test/jest-resolver.js`,
   setupFilesAfterEnv: ['./public/test/setupTests.ts'],
   snapshotSerializers: ['enzyme-to-json/serializer'],
   globals: {
@@ -37,5 +38,4 @@ module.exports = {
     // Because we mock out <Trans /> anyway, we can mock the messages also
     'locales/\\w+/messages$': '<rootDir>/public/test/mocks/i18nMessages.ts',
   },
-  watchPathIgnorePatterns: ['<rootDir>/node_modules/'],
 };

package.json

@@ -130,7 +130,7 @@
     "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5",
     "@types/history": "4.7.11",
     "@types/hoist-non-react-statics": "3.3.1",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.1",
     "@types/jquery": "3.5.14",
     "@types/js-yaml": "^4.0.5",
     "@types/jsurl": "^1.2.28",
@@ -171,7 +171,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "autoprefixer": "10.4.7",
     "axios": "0.27.2",
-    "babel-jest": "27.5.1",
+    "babel-jest": "28.1.0",
     "babel-loader": "8.2.5",
     "babel-plugin-angularjs-annotate": "0.10.0",
     "babel-plugin-macros": "3.1.0",
@@ -200,12 +200,13 @@
     "http-server": "14.1.0",
     "husky": "8.0.1",
     "iconscout-unicons-tarball": "https://github.com/grafana/icons/tarball/63056cd833ba7ee4e94904492b3a8c0cabc38d28",
-    "jest": "27.5.1",
+    "jest": "28.1.0",
     "jest-canvas-mock": "2.4.0",
     "jest-date-mock": "1.0.8",
+    "jest-environment-jsdom": "28.1.0",
     "jest-fail-on-console": "2.4.1",
     "jest-junit": "13.2.0",
-    "jest-matcher-utils": "27.5.1",
+    "jest-matcher-utils": "28.1.0",
     "jest-mock-console": "1.2.3",
     "lerna": "^4.0.0",
     "lint-staged": "12.4.1",
@@ -234,7 +235,7 @@
     "stylelint-config-sass-guidelines": "9.0.1",
     "terser-webpack-plugin": "5.3.1",
     "testing-library-selector": "0.2.1",
-    "ts-jest": "27.1.3",
+    "ts-jest": "28.0.3",
     "ts-loader": "9.2.6",
     "ts-node": "10.7.0",
     "typescript": "4.6.4",

packages/grafana-data/package.json

@@ -53,7 +53,7 @@
     "@testing-library/react-hooks": "8.0.0",
     "@testing-library/user-event": "14.2.0",
     "@types/history": "4.7.11",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.1",
     "@types/jquery": "3.5.14",
     "@types/lodash": "4.14.182",
     "@types/marked": "4.0.3",

packages/grafana-runtime/package.json

@@ -43,7 +43,7 @@
     "@testing-library/user-event": "14.2.0",
     "@types/angular": "1.8.4",
     "@types/history": "4.7.11",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.1",
     "@types/lodash": "4.14.182",
     "@types/react": "17.0.42",
     "@types/react-dom": "17.0.14",

packages/grafana-ui/package.json

@@ -127,7 +127,7 @@
     "@types/grafana__slate-react": "npm:@types/slate-react@0.22.5",
     "@types/hoist-non-react-statics": "3.3.1",
     "@types/is-hotkey": "0.1.7",
-    "@types/jest": "27.4.1",
+    "@types/jest": "27.5.1",
     "@types/jquery": "3.5.14",
     "@types/lodash": "4.14.182",
     "@types/mock-raf": "1.0.3",

public/app/plugins/datasource/cloudwatch/utils/logsRetry.test.ts

@@ -13,20 +13,22 @@ describe('runWithRetry', () => {
   const timeoutFail = () => true;
   it('returns results if no retry is needed', async () => {
     const queryFunc = jest.fn();
-    queryFunc.mockReturnValueOnce(of([createResponseFrame('A')]));
+    const mockFrames = [createResponseFrame('A')];
+    queryFunc.mockReturnValueOnce(of(mockFrames));
     const targets = [targetA];
     const values = await lastValueFrom(runWithRetry(queryFunc, targets, timeoutPass).pipe(toArray()));
     expect(queryFunc).toBeCalledTimes(1);
     expect(queryFunc).toBeCalledWith(targets);
-    expect(values).toEqual([{ frames: [createResponseFrame('A')] }]);
+    expect(values).toEqual([{ frames: mockFrames }]);
   });
 
   it('retries if error', async () => {
     jest.useFakeTimers();
     const targets = [targetA];
     const queryFunc = jest.fn();
+    const mockFrames = [createResponseFrame('A')];
     queryFunc.mockReturnValueOnce(throwError(() => createErrorResponse(targets)));
-    queryFunc.mockReturnValueOnce(of([createResponseFrame('A')]));
+    queryFunc.mockReturnValueOnce(of(mockFrames));
 
     const valuesPromise = lastValueFrom(runWithRetry(queryFunc, targets, timeoutPass).pipe(toArray()));
     jest.runAllTimers();
@@ -35,7 +37,7 @@ describe('runWithRetry', () => {
     expect(queryFunc).toBeCalledTimes(2);
     expect(queryFunc).nthCalledWith(1, targets);
     expect(queryFunc).nthCalledWith(2, targets);
-    expect(values).toEqual([{ frames: [createResponseFrame('A')] }]);
+    expect(values).toEqual([{ frames: mockFrames }]);
   });
 
   it('fails if reaching timeout and no data was retrieved', async () => {
@@ -82,13 +84,14 @@ describe('runWithRetry', () => {
   it('works with multiple queries if there is no error', async () => {
     const targets = [targetA, targetB];
     const queryFunc = jest.fn();
-    queryFunc.mockReturnValueOnce(of([createResponseFrame('A'), createResponseFrame('B')]));
+    const mockFrames = [createResponseFrame('A'), createResponseFrame('B')];
+    queryFunc.mockReturnValueOnce(of(mockFrames));
 
     const values = await lastValueFrom(runWithRetry(queryFunc, targets, timeoutPass).pipe(toArray()));
 
     expect(queryFunc).toBeCalledTimes(1);
     expect(queryFunc).nthCalledWith(1, targets);
-    expect(values).toEqual([{ frames: [createResponseFrame('A'), createResponseFrame('B')] }]);
+    expect(values).toEqual([{ frames: mockFrames }]);
   });
 
   it('works with multiple queries only one errors out', async () => {

public/app/plugins/datasource/tempo/resultTransformer.test.ts

@@ -90,7 +90,10 @@ describe('transformFromOTLP()', () => {
       otlpResponse.batches as unknown as collectorTypes.opentelemetryProto.trace.v1.ResourceSpans[],
       false
     );
-    expect(res.data[0]).toMatchObject(otlpDataFrameFromResponse);
+    expect(res.data[0]).toMatchObject({
+      ...otlpDataFrameFromResponse,
+      creator: expect.any(Function),
+    });
   });
 });
 

public/app/plugins/datasource/tempo/testResponse.ts

@@ -1804,63 +1804,41 @@ export const otlpDataFrameFromResponse = new MutableDataFrame({
       traceFormat: 'otlp',
     },
   },
-  creator: jest.fn(),
   fields: [
     {
       name: 'traceID',
       type: 'string',
       config: {},
-      labels: undefined,
       values: ['60ba2abb44f13eae'],
-      state: {
-        displayName: 'traceID',
-      },
     },
     {
       name: 'spanID',
       type: 'string',
       config: {},
-      labels: undefined,
       values: ['726b5e30102fc0d0'],
-      state: {
-        displayName: 'spanID',
-      },
     },
     {
       name: 'parentSpanID',
       type: 'string',
       config: {},
-      labels: undefined,
       values: ['398f0f21a3db99ae'],
-      state: {
-        displayName: 'parentSpanID',
-      },
     },
     {
       name: 'operationName',
       type: 'string',
       config: {},
-      labels: undefined,
       values: ['HTTP GET - root'],
-      state: {
-        displayName: 'operationName',
-      },
     },
     {
       name: 'serviceName',
       type: 'string',
       config: {},
-      labels: undefined,
       values: ['db'],
-      state: {
-        displayName: 'serviceName',
-      },
     },
     {
       name: 'serviceTags',
       type: 'other',
       config: {},
-      labels: undefined,
       values: [
         [
           {
@@ -1889,45 +1867,29 @@ export const otlpDataFrameFromResponse = new MutableDataFrame({
           },
         ],
       ],
-      state: {
-        displayName: 'serviceTags',
-      },
     },
     {
       name: 'startTime',
       type: 'number',
       config: {},
-      labels: undefined,
       values: [1627471657255.809],
-      state: {
-        displayName: 'startTime',
-      },
     },
     {
       name: 'duration',
       type: 'number',
       config: {},
-      labels: undefined,
       values: [0.459008],
-      state: {
-        displayName: 'duration',
-      },
     },
     {
       name: 'logs',
       type: 'other',
       config: {},
-      labels: undefined,
       values: [[]],
-      state: {
-        displayName: 'logs',
-      },
     },
     {
       name: 'references',
       type: 'other',
       config: {},
-      labels: undefined,
       values: [
         [
           {
@@ -1945,15 +1907,11 @@ export const otlpDataFrameFromResponse = new MutableDataFrame({
           },
         ],
       ],
-      state: {
-        displayName: 'references',
-      },
     },
     {
       name: 'tags',
       type: 'other',
       config: {},
-      labels: undefined,
       values: [
         [
           {
@@ -1978,9 +1936,6 @@ export const otlpDataFrameFromResponse = new MutableDataFrame({
           },
         ],
       ],
-      state: {
-        displayName: 'tags',
-      },
     },
   ],
   length: 1,

public/test/jest-resolver.js

@@ -0,0 +1,33 @@
+module.exports = (path, options) => {
+  // Call the defaultResolver, so we leverage its cache, error handling, etc.
+  return options.defaultResolver(path, {
+    ...options,
+    // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+    packageFilter: (pkg) => {
+      // see https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
+      // see https://github.com/uuidjs/uuid/pull/616
+      //
+      // jest-environment-jsdom 28+ tries to use browser exports instead of default exports,
+      // but uuid/react-colorful only offers an ESM browser export and not a CommonJS one. Jest does not yet
+      // support ESM modules natively, so this causes a Jest error related to trying to parse
+      // "export" syntax.
+      //
+      // This workaround prevents Jest from considering uuid/react-colorful's module-based exports at all;
+      // it falls back to uuid's CommonJS+node "main" property.
+      //
+      // Once we're able to migrate our Jest config to ESM and a browser crypto
+      // implementation is available for the browser+ESM version of uuid to use (eg, via
+      // https://github.com/jsdom/jsdom/pull/3352 or a similar polyfill), this can go away.
+      //
+      // How to test if this is needed anymore:
+      // - comment it out
+      // - run `yarn test`
+      // - if all the tests pass, it means the workaround is no longer needed
+      if (pkg.name === 'uuid' || pkg.name === 'react-colorful') {
+        delete pkg['exports'];
+        delete pkg['module'];
+      }
+      return pkg;
+    },
+  });
+};