Plugins: Mock Icon component to prevent console errors (#39901)

* feat(grafana-ui): externalise react-inlinesvg for mocking

* feat(grafana-toolkit): mock react-inlinesvg to prevent svg fetch errors in tests

* test(toolkit): remove assertion on array length of moduleNameMapper overrides

* feat(toolkit): set testId to match the Icon name prop in react-inlinesvg mock

packages/grafana-toolkit/src/cli/tasks/toolkit.build.ts

@@ -58,6 +58,7 @@ const copyFiles = () => {
     'src/config/styles.mock.js',
     'src/config/jest.plugin.config.local.js',
     'src/config/matchMedia.js',
+    'src/config/react-inlinesvg.tsx',
   ];
 
   return useSpinner(`Moving ${files.join(', ')} files`, async () => {

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

@@ -26,7 +26,6 @@ describe('Jest config', () => {
     it('should preserve mapping for stylesheets when moduleNameMapper overrides provided', () => {
       const config = jestConfig(`${__dirname}/mocks/jestSetup/overrides`);
       expect(config.moduleNameMapper).toBeDefined();
-      expect(Object.keys(config.moduleNameMapper)).toHaveLength(2);
       expect(Object.keys(config.moduleNameMapper)).toContain('\\.(css|sass|scss)$');
       expect(Object.keys(config.moduleNameMapper)).toContain('someOverride');
     });

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

@@ -44,6 +44,7 @@ export const jestConfig = (baseDir: string = process.cwd()) => {
   const { moduleNameMapper, ...otherOverrides } = jestConfigOverrides;
   const moduleNameMapperConfig = {
     '\\.(css|sass|scss)$': `${__dirname}/styles.mock.js`,
+    'react-inlinesvg': `${__dirname}/react-inlinesvg.tsx`,
     ...moduleNameMapper,
   };
 

packages/grafana-toolkit/src/config/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 React from 'react';
+
+type Callback = (...args: any[]) => 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 }: { src: string }) => {
+  // 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" />;
+};
+
+export default InlineSVG;

packages/grafana-ui/rollup.config.ts

@@ -34,6 +34,7 @@ const buildCjsPackage = ({ env }) => {
       '@grafana/e2e-selectors',
       'moment',
       'jquery', // required to use jquery.plot, which is assigned externally
+      'react-inlinesvg', // required to mock Icon svg loading in tests
     ],
     plugins: [
       commonjs({