remove enzyme & address test warnings

Author: nicolethoen

before-tests.js

@@ -1,3 +1,34 @@
 /* eslint-env node */
 
 import 'url-search-params-polyfill';
+
+// Suppress act() warnings only for async markdown rendering (SyncMarkdownView /
+// QuickStartMarkdownView). Other act warnings still surface so new tests stay honest.
+const originalError = console.error;
+
+const isMarkdownActWarning = (...args) => {
+  const message = args
+    .map((a) => {
+      if (typeof a === 'string') {
+        return a;
+      }
+      if (a instanceof Error && typeof a.message === 'string') {
+        return a.message;
+      }
+      return '';
+    })
+    .join('\n');
+  if (!message.includes('was not wrapped in act(')) {
+    return false;
+  }
+  return (
+    message.includes('SyncMarkdownView') || message.includes('QuickStartMarkdownView')
+  );
+};
+
+console.error = (...args) => {
+  if (isMarkdownActWarning(...args)) {
+    return;
+  }
+  originalError.call(console, ...args);
+};

packages/module/package.json

@@ -69,18 +69,13 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^13.4.0",
     "@types/dompurify": "^3.0.5",
-    "@types/enzyme": "^3.10.7",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/history": "^4.7.8",
     "@types/node": "^14.14.35",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.0.0",
     "clean-css-cli": "^4.3.0",
     "concat-files": "^0.1.1",
     "dart-sass": "^1.25.0",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "enzyme-to-json": "^3.6.1",
     "monaco-editor": "0.34.1",
     "node-sass-glob-importer": "^5.3.2",
     "prettier": "^2.8.8",

packages/module/src/catalog/__tests__/QuickStartCatalog.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { getQuickStarts } from '../../data/test-utils';
 import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartCatalog from '../QuickStartCatalog';
@@ -24,12 +24,16 @@ describe('QuickStartCatalog', () => {
     expect(screen.queryByRole('article')).not.toBeInTheDocument();
   });
 
-  it('should load a gallery if QS exist', () => {
+  it('should load a gallery if QS exist', async () => {
     const quickStarts = getQuickStarts();
     renderWithContext({ quickStarts });
     // Each tile exposes the quick start display name as the title control (link-styled button)
-    quickStarts.forEach((qs) => {
-      expect(screen.getByRole('button', { name: qs.spec.displayName })).toBeInTheDocument();
+    await waitFor(() => {
+      quickStarts.forEach((qs) => {
+        expect(
+          screen.getByRole('button', { name: qs.spec.displayName }),
+        ).toBeInTheDocument();
+      });
     });
   });
 });

packages/module/src/catalog/__tests__/QuickStartTile.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { getQuickStarts } from '../../data/test-utils';
 import { QuickStartStatus } from '../../utils/quick-start-types';
 import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
@@ -21,28 +21,36 @@ const renderWithContext = (props: any) =>
   );
 
 describe('QuickStartTile', () => {
-  it('should load proper catalog tile without featured property', () => {
+  it('should load proper catalog tile without featured property', async () => {
     const quickStart = quickstarts[0];
     renderWithContext({
       quickStart,
       status: QuickStartStatus.NOT_STARTED,
       onClick: jest.fn(),
       isActive: false,
     });
-    expect(screen.getByRole('button', { name: quickStart.spec.displayName })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: quickStart.spec.displayName }),
+      ).toBeInTheDocument();
+    });
     // Status label is omitted for not-started tiles
     expect(screen.queryByText('In progress')).not.toBeInTheDocument();
   });
 
-  it('should load proper catalog tile with featured property', () => {
+  it('should load proper catalog tile with featured property', async () => {
     const quickStart = quickstarts[1];
     renderWithContext({
       quickStart,
       status: QuickStartStatus.IN_PROGRESS,
       onClick: jest.fn(),
       isActive: true,
     });
-    expect(screen.getByRole('button', { name: quickStart.spec.displayName })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: quickStart.spec.displayName }),
+      ).toBeInTheDocument();
+    });
     expect(screen.getByText('In progress')).toBeInTheDocument();
   });
 });

packages/module/src/catalog/__tests__/QuickStartTileDescription.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { getQuickStarts } from '../../data/test-utils';
 import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartTileDescription from '../QuickStartTileDescription';
@@ -19,18 +19,26 @@ const renderWithContext = (props: any) =>
   );
 
 describe('QuickStartTileDescription', () => {
-  it('should show prerequisites only if provided', () => {
+  it('should show prerequisites only if provided', async () => {
     const quickStart = getQuickStarts()[0].spec;
     renderWithContext({ description: quickStart.description });
-    expect(screen.queryByRole('button', { name: 'Show prerequisites' })).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.queryByRole('button', { name: 'Show prerequisites' }),
+      ).not.toBeInTheDocument();
+    });
   });
 
-  it('should render prerequisites trigger when prerequisite list is non-empty', () => {
+  it('should render prerequisites trigger when prerequisite list is non-empty', async () => {
     const quickStart = getQuickStarts()[2].spec;
     renderWithContext({
       description: quickStart.description,
       prerequisites: quickStart.prerequisites,
     });
-    expect(screen.getByRole('button', { name: 'Show prerequisites' })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'Show prerequisites' }),
+      ).toBeInTheDocument();
+    });
   });
 });

packages/module/src/controller/__tests__/QuickStartFooter.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { QuickStartStatus } from '../../utils/quick-start-types';
 import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartFooter from '../QuickStartFooter';
@@ -19,7 +19,7 @@ const renderWithContext = (props: any) =>
   );
 
 describe('QuickStartFooter', () => {
-  it('should load Start button for not started tours', () => {
+  it('should load Start button for not started tours', async () => {
     renderWithContext({
       status: QuickStartStatus.NOT_STARTED,
       footerClass: 'test',
@@ -29,11 +29,13 @@ describe('QuickStartFooter', () => {
       totalTasks: 4,
       taskNumber: -1,
     });
-    expect(screen.getByRole('button', { name: 'Start' })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Start' })).toBeInTheDocument();
+    });
     expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
   });
 
-  it('should load Continue and Restart buttons for in progress tours at intro page', () => {
+  it('should load Continue and Restart buttons for in progress tours at intro page', async () => {
     renderWithContext({
       status: QuickStartStatus.IN_PROGRESS,
       footerClass: 'test',
@@ -43,11 +45,13 @@ describe('QuickStartFooter', () => {
       totalTasks: 4,
       taskNumber: -1,
     });
-    expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+    });
     expect(screen.getByRole('button', { name: 'Restart' })).toBeInTheDocument();
   });
 
-  it('should load Next, Back, and Restart buttons for in progress tours in task page', () => {
+  it('should load Next, Back, and Restart buttons for in progress tours in task page', async () => {
     renderWithContext({
       status: QuickStartStatus.IN_PROGRESS,
       footerClass: 'test',
@@ -57,12 +61,14 @@ describe('QuickStartFooter', () => {
       totalTasks: 4,
       taskNumber: 2,
     });
-    expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Next' })).toBeInTheDocument();
+    });
     expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Restart' })).toBeInTheDocument();
   });
 
-  it('should load Close, Back and Restart buttons for completed tours in conclusion page', () => {
+  it('should load Close, Back and Restart buttons for completed tours in conclusion page', async () => {
     renderWithContext({
       status: QuickStartStatus.COMPLETE,
       footerClass: 'test',
@@ -72,7 +78,9 @@ describe('QuickStartFooter', () => {
       totalTasks: 4,
       taskNumber: 4,
     });
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+    });
     expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Restart' })).toBeInTheDocument();
   });

packages/module/src/controller/__tests__/QuickStartTaskHeader.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { QuickStartTaskStatus } from '../../utils/quick-start-types';
 import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
 import QuickStartTaskHeader from '../QuickStartTaskHeader';
@@ -26,18 +26,22 @@ const renderWithContext = (props = {}) =>
   );
 
 describe('QuickStartTaskHeader', () => {
-  it('should render subtitle for active task', () => {
+  it('should render subtitle for active task', async () => {
     renderWithContext();
-    expect(
-      screen.getByRole('button', {
-        name: new RegExp(`${defaultProps.title}.*${defaultProps.subtitle}`),
-      }),
-    ).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', {
+          name: new RegExp(`${defaultProps.title}.*${defaultProps.subtitle}`),
+        }),
+      ).toBeInTheDocument();
+    });
   });
 
-  it('should not render subtitle if task is not active', () => {
+  it('should not render subtitle if task is not active', async () => {
     renderWithContext({ isActiveTask: false });
-    expect(screen.getByRole('button', { name: defaultProps.title })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: defaultProps.title })).toBeInTheDocument();
+    });
     expect(screen.queryByText(defaultProps.subtitle)).not.toBeInTheDocument();
   });
 });

packages/module/src/controller/__tests__/QuickStartTaskReview.spec.tsx

@@ -26,23 +26,29 @@ const renderWithContext = (props = {}) =>
   );
 
 describe('QuickStartTaskReview', () => {
-  it('should render review prompt with yes/no while task is in review', () => {
+  it('should render review prompt with yes/no while task is in review', async () => {
     renderWithContext();
-    expect(screen.getByRole('alert')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
     expect(screen.getByText('Check your work')).toBeInTheDocument();
     expect(screen.getByRole('radio', { name: 'Yes' })).not.toBeChecked();
     expect(screen.getByRole('radio', { name: 'No' })).not.toBeChecked();
   });
 
-  it('should mark Yes selected when task status is success', () => {
+  it('should mark Yes selected when task status is success', async () => {
     renderWithContext({ taskStatus: QuickStartTaskStatus.SUCCESS });
-    expect(screen.getByRole('radio', { name: 'Yes' })).toBeChecked();
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: 'Yes' })).toBeChecked();
+    });
     expect(screen.getByRole('radio', { name: 'No' })).not.toBeChecked();
   });
 
   it('should mark No selected and show failed-task help when task status is failed', async () => {
     renderWithContext({ taskStatus: QuickStartTaskStatus.FAILED });
-    expect(screen.getByRole('radio', { name: 'No' })).toBeChecked();
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: 'No' })).toBeChecked();
+    });
     expect(screen.getByRole('radio', { name: 'Yes' })).not.toBeChecked();
     await waitFor(() => {
       expect(document.body.textContent).toMatch(/This task is incomplete/);

packages/module/src/controller/__tests__/QuickStartTasks.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { allQuickStarts } from '../../data/quick-start-test-data';
 import { QuickStartTaskStatus } from '../../utils/quick-start-types';
 import { QuickStartContext, QuickStartContextDefaults } from '../../utils/quick-start-context';
@@ -39,14 +39,16 @@ describe('QuickStartTasks', () => {
     jest.clearAllMocks();
   });
 
-  it('should render correct number of tasks based on currentTaskIndex', () => {
+  it('should render correct number of tasks based on currentTaskIndex', async () => {
     renderWithContext();
-    // Only non-INIT tasks are rendered; first task is SUCCESS so it shows
-    const taskHeaders = screen.getAllByRole('listitem');
-    expect(taskHeaders).toHaveLength(1);
+    await waitFor(() => {
+      // Only non-INIT tasks are rendered; first task is SUCCESS so it shows
+      const taskHeaders = screen.getAllByRole('listitem');
+      expect(taskHeaders).toHaveLength(1);
+    });
   });
 
-  it('should render description if a task is active', () => {
+  it('should render description if a task is active', async () => {
     renderWithContext({
       allTaskStatuses: [
         QuickStartTaskStatus.SUCCESS,
@@ -55,20 +57,24 @@ describe('QuickStartTasks', () => {
       ],
       taskNumber: 2,
     });
-    // All 3 tasks are non-INIT, so all render
-    const taskHeaders = screen.getAllByRole('listitem');
-    expect(taskHeaders).toHaveLength(3);
+    await waitFor(() => {
+      // All 3 tasks are non-INIT, so all render
+      const taskHeaders = screen.getAllByRole('listitem');
+      expect(taskHeaders).toHaveLength(3);
+    });
   });
 
-  it('should render review when task is active and in Review state', () => {
+  it('should render review when task is active and in Review state', async () => {
     renderWithContext({
       allTaskStatuses: [
         QuickStartTaskStatus.SUCCESS,
         QuickStartTaskStatus.REVIEW,
         QuickStartTaskStatus.INIT,
       ],
     });
-    // "Check your work" is the alert title for QuickStartTaskReview
-    expect(screen.getByText('Check your work')).toBeInTheDocument();
+    await waitFor(() => {
+      // "Check your work" is the alert title for QuickStartTaskReview
+      expect(screen.getByText('Check your work')).toBeInTheDocument();
+    });
   });
 });