Adds d3-* in moduleNameMapper option on jest.js

Signed-off-by: Leonardo Maier <leonarmaier@gmail.com>

packages/cli/config/jest.js

@@ -132,6 +132,7 @@ async function getProjectConfig(targetPath, displayName) {
     collectCoverageFrom: ['**/*.{js,jsx,ts,tsx,mjs,cjs}', '!**/*.d.ts'],
     moduleNameMapper: {
       '\\.(css|less|scss|sss|styl)$': require.resolve('jest-css-modules'),
+      '^d3-(.*)$': 'd3-$1/dist/d3-$1',
     },
 
     transform: {

plugins/cost-insights/src/alerts/ProjectGrowthAlert.test.tsx

@@ -69,6 +69,23 @@ class CustomProjectGrowthAlert extends ProjectGrowthAlert {
 }
 
 describe('ProjectGrowthAlert', () => {
+  const { ResizeObserver } = window;
+
+  beforeEach(() => {
+    // @ts-expect-error
+    delete window.ResizeObserver;
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    jest.restoreAllMocks();
+  });
+
   describe('constructor', () => {
     it('should create a project growth alert', async () => {
       const alert = new ProjectGrowthAlert(mockData);

plugins/cost-insights/src/alerts/UnlabeledDataflowAlert.test.tsx

@@ -66,6 +66,22 @@ class CustomUnlabeledDataflowAlert extends UnlabeledDataflowAlert {
 }
 
 describe('UnlabeledDataflowAlert', () => {
+  const { ResizeObserver } = window;
+  beforeEach(() => {
+    // @ts-expect-error
+    delete window.ResizeObserver;
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    jest.restoreAllMocks();
+  });
+
   describe('constructor', () => {
     it('should create an unlabeled dataflow alert', async () => {
       const alert = new UnlabeledDataflowAlert(mockData);

plugins/cost-insights/src/components/BarChart/BarChart.test.tsx

@@ -55,6 +55,22 @@ const renderWithProps = ({
 };
 
 describe('<BarChart />', () => {
+  const { ResizeObserver } = window;
+  beforeEach(() => {
+    // @ts-expect-error
+    delete window.ResizeObserver;
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    jest.restoreAllMocks();
+  });
+
   it('Renders without exploding', async () => {
     const rendered = await renderWithProps({} as BarChartProps);
     expect(rendered.getByText('test-id-10')).toBeInTheDocument();

plugins/cost-insights/src/components/ProductInsightsCard/ProductInsightsCard.test.tsx

@@ -74,6 +74,22 @@ const renderProductInsightsCardInTestApp = async (
   );
 
 describe('<ProductInsightsCard/>', () => {
+  const { ResizeObserver } = window;
+  beforeEach(() => {
+    // @ts-expect-error
+    delete window.ResizeObserver;
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    jest.restoreAllMocks();
+  });
+
   it('Should render the right subheader for products with cost data', async () => {
     const entity = {
       ...mockProductCost,

plugins/cost-insights/src/components/ProjectGrowthAlertCard/ProjectGrowthAlertCard.test.tsx

@@ -45,6 +45,22 @@ const MockProjectGrowthAlert = createMockProjectGrowthData(data => ({
 }));
 
 describe('<ProjectGrowthAlertCard />', () => {
+  const { ResizeObserver } = window;
+  beforeEach(() => {
+    // @ts-expect-error
+    delete window.ResizeObserver;
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    jest.restoreAllMocks();
+  });
+
   it('renders the correct title and subheader for multiple services', async () => {
     const subheader = new RegExp(
       `${MockAlertCosts.length} products, sorted by cost`,

plugins/cost-insights/src/components/UnlabeledDataflowAlertCard/UnlabeledDataflowAlertCard.test.tsx

@@ -40,6 +40,21 @@ const MockUnlabeledDataflowAlertSingleProject = createMockUnlabeledDataflowData(
 );
 
 describe('<UnlabeledDataflowAlertCard />', () => {
+  const { ResizeObserver } = window;
+  beforeEach(() => {
+    // @ts-expect-error
+    delete window.ResizeObserver;
+    window.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    window.ResizeObserver = ResizeObserver;
+    jest.restoreAllMocks();
+  });
   it('renders the correct subheader for multiple projects', async () => {
     const subheader = new RegExp(
       `Showing costs from ${MockUnlabeledDataflowAlertMultipleProjects.projects.length} ` +

plugins/xcmetrics/src/components/BuildTimeline/BuildTimeline.test.tsx

@@ -24,8 +24,7 @@ describe('BuildTimeline', () => {
   const { ResizeObserver } = window;
 
   beforeEach(() => {
-    // @ts-expect-error: Since we have strictNullChecks enabled, this will throw an error as window.ResizeObserver
-    // it's not an optional operand
+    // @ts-expect-error
     delete window.ResizeObserver;
     window.ResizeObserver = jest.fn().mockImplementation(() => ({
       observe: jest.fn(),