grafana/toolkit: Support js plugins (#19952)

* Making flowchart work

* Enable testEnvironment jest option

* Add babel-jest to grafana-toolkit

* Fix test

* Resolve either js or ts jest setup files

* Update packages/grafana-toolkit/src/config/jest.plugin.config.ts

* Update packages/grafana-toolkit/src/config/webpack.plugin.config.ts

packages/grafana-toolkit/package.json

@@ -44,6 +44,7 @@
     "@types/webpack": "4.4.34",
     "aws-sdk": "^2.495.0",
     "axios": "0.19.0",
+    "babel-jest": "24.8.0",
     "babel-loader": "8.0.6",
     "babel-plugin-angularjs-annotate": "0.10.0",
     "chalk": "^2.4.2",

packages/grafana-toolkit/src/config/jest.plugin.config.ts

 import path = require('path');
 import fs from 'fs';
 
-export const allowedJestConfigOverrides = ['snapshotSerializers', 'moduleNameMapper'];
+export const allowedJestConfigOverrides = [
+  'snapshotSerializers',
+  'moduleNameMapper',
+  'globalSetup',
+  'globalTeardown',
+  'testEnvironment',
+];
 
 interface EnabledJestConfigOverrides {
   snapshotSerializers: string[];
   moduleNameMapper: { [key: string]: string };
 }
 
+const getSetupFile = (filePath: string) => {
+  if (fs.existsSync(`${filePath}.js`)) {
+    return `${filePath}.js`;
+  }
+  if (fs.existsSync(`${filePath}.ts`)) {
+    return `${filePath}.ts`;
+  }
+  return undefined;
+};
+
 export const jestConfig = (baseDir: string = process.cwd()) => {
   const jestConfigOverrides = (require(path.resolve(baseDir, 'package.json')).jest || {}) as EnabledJestConfigOverrides;
 
@@ -21,8 +37,8 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
     throw new Error('Provided Jest config is not supported');
   }
 
-  const shimsFilePath = path.resolve(baseDir, 'config/jest-shim.ts');
-  const setupFilePath = path.resolve(baseDir, 'config/jest-setup.ts');
+  const shimsFilePath = path.resolve(baseDir, 'config/jest-shim');
+  const setupFilePath = path.resolve(baseDir, 'config/jest-setup');
 
   // Mock css imports for tests. Otherwise Jest will have troubles understanding SASS/CSS imports
   const { moduleNameMapper, ...otherOverrides } = jestConfigOverrides;
@@ -31,8 +47,9 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
     ...moduleNameMapper,
   };
 
-  const setupFile = fs.existsSync(setupFilePath) ? setupFilePath : undefined;
-  const shimsFile = fs.existsSync(shimsFilePath) ? shimsFilePath : undefined;
+  const setupFile = getSetupFile(setupFilePath);
+  const shimsFile = getSetupFile(shimsFilePath);
+
   const setupFiles = [setupFile, shimsFile].filter(f => f);
   const defaultJestConfig = {
     preset: 'ts-jest',
@@ -46,7 +63,11 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
     testMatch: [
       '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
       '<rootDir>/src/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
+      '<rootDir>/spec/**/*.{spec,test,jest}.{js,jsx,ts,tsx}',
     ],
+    transform: {
+      '^.+\\.js$': 'babel-jest',
+    },
     transformIgnorePatterns: [
       '[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|ts|tsx)$',
       '^.+\\\\.module\\\\.(css|sass|scss)$',

packages/grafana-toolkit/src/config/mocks/jestSetup/overrides/package.json

@@ -3,6 +3,9 @@
     "moduleNameMapper": {
       "someOverride": "somePath"
     },
-    "snapshotSerializers": "serializers"
+    "snapshotSerializers": "serializers",
+    "globalSetup": "path",
+    "globalTeardown": "path",
+    "testEnvironment": "node"
   }
 }

packages/grafana-toolkit/src/config/webpack.plugin.config.ts

@@ -27,7 +27,7 @@ export const findModuleFiles = (base: string, files?: string[], result?: string[
         result = findModuleFiles(newbase, fs.readdirSync(newbase), result);
       } else {
         const filename = path.basename(file);
-        if (/^module.tsx?$/.exec(filename)) {
+        if (/^module.(t|j)sx?$/.exec(filename)) {
           // @ts-ignore
           result.push(newbase);
         }
@@ -42,7 +42,7 @@ const getModuleFiles = () => {
 };
 
 const getManualChunk = (id: string) => {
-  if (id.endsWith('module.ts') || id.endsWith('module.tsx')) {
+  if (id.endsWith('module.ts') || id.endsWith('module.js') || id.endsWith('module.tsx')) {
     const idx = id.lastIndexOf(path.sep + 'src' + path.sep);
     if (idx > 0) {
       const name = id.substring(idx + 5, id.lastIndexOf('.'));
@@ -89,6 +89,8 @@ const getCommonPlugins = (options: WebpackConfigurationOptions) => {
         { from: '**/*.svg', to: '.' },
         { from: '**/*.png', to: '.' },
         { from: '**/*.html', to: '.' },
+        { from: 'libs/*', to: '.' },
+        { from: 'static/*', to: '.' },
       ],
       { logLevel: options.watch ? 'silent' : 'warn' }
     ),
@@ -195,6 +197,19 @@ export const getWebpackConfig: WebpackConfigurationGetter = options => {
           ],
           exclude: /(node_modules)/,
         },
+        {
+          test: /\.jsx?$/,
+          loaders: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: [['@babel/preset-env', { modules: false }]],
+                plugins: ['angularjs-annotate'],
+              },
+            },
+          ],
+          exclude: /(node_modules)/,
+        },
         ...getStyleLoaders(),
         {
           test: /\.html$/,