Clean up test suite console warnings (#2961)

* Wrap renders in act and waitFor to remove console warnings

* Update test util helpers

Author: chownces

src/commons/__tests__/ContentDisplay.tsx

@@ -5,8 +5,8 @@ const mockProps: ContentDisplayProps = {
   display: <div> Test Content </div>
 };
 
-test('ContentDisplay page renders correctly', () => {
+test('ContentDisplay page renders correctly', async () => {
   const app = <ContentDisplay {...mockProps} />;
-  const tree = renderTreeJson(app);
+  const tree = await renderTreeJson(app);
   expect(tree).toMatchSnapshot();
 });

src/commons/__tests__/Markdown.tsx

@@ -12,9 +12,9 @@ const mockProps = (sourceChapter: Chapter, sourceVariant: Variant) => {
   };
 };
 
-test('Markdown page renders correctly', () => {
+test('Markdown page renders correctly', async () => {
   const app = <Markdown {...mockProps(Chapter.SOURCE_1, Variant.DEFAULT)} />;
-  const tree = renderTreeJson(app);
+  const tree = await renderTreeJson(app);
   expect(tree).toMatchSnapshot();
 });
 

src/commons/assessment/__tests__/Assessment.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router';
 import { Store } from 'redux';
@@ -47,25 +47,25 @@ const createTestComponent = (mockStore: Store<OverallState>) => (
   </Provider>
 );
 
-test('Assessment page "loading" content renders correctly', () => {
+test('Assessment page "loading" content renders correctly', async () => {
   const mockStore = getOverriddenStore({});
   const app = createTestComponent(mockStore);
 
-  const tree = renderTreeJson(app);
+  const tree = await renderTreeJson(app);
   expect(tree).toMatchSnapshot();
 
   render(app);
   screen.getByText('Fetching assessment...');
 });
 
-test('Assessment page with 0 missions renders correctly', () => {
+test('Assessment page with 0 missions renders correctly', async () => {
   const mockStore = getOverriddenStore({ assessmentOverviews: [] });
   const app = createTestComponent(mockStore);
 
-  const tree = renderTreeJson(app);
+  const tree = await renderTreeJson(app);
   expect(tree).toMatchSnapshot();
 
-  render(app);
+  await act(() => render(app));
   screen.getByText('There are no assessments.');
 });
 
@@ -76,23 +76,23 @@ test('Assessment page with multiple loaded missions renders correctly', async ()
   });
   const app = createTestComponent(mockStore);
 
-  const tree = renderTreeJson(app);
+  const tree = await renderTreeJson(app);
   expect(tree).toMatchSnapshot();
 
-  render(app);
+  await act(() => render(app));
   expect(screen.getAllByTestId('Assessment-Attempt-Button').length).toBe(3);
 });
 
-test('Assessment page does not show attempt Button for upcoming assessments for student user', () => {
+test('Assessment page does not show attempt Button for upcoming assessments for student user', async () => {
   const mockStore = getOverriddenStore({
     assessmentOverviews: mockAssessmentOverviews,
     role: Role.Student
   });
   const app = createTestComponent(mockStore);
 
-  const tree = renderTreeJson(app);
+  const tree = await renderTreeJson(app);
   expect(tree).toMatchSnapshot();
 
-  render(app);
+  await act(() => render(app));
   expect(screen.getAllByTestId('Assessment-Attempt-Button').length).toBe(2);
 });

src/commons/assessmentWorkspace/__tests__/AssessmentWorkspace.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { require as acequire } from 'ace-builds';
 import { Provider } from 'react-redux';
 import { createMemoryRouter, RouterProvider } from 'react-router';
@@ -101,7 +101,7 @@ const createMemoryRouterWithRoutes = (props: AssessmentWorkspaceProps) => {
 };
 
 const renderElement = (props: AssessmentWorkspaceProps) =>
-  render(createMemoryRouterWithRoutes(props));
+  waitFor(() => render(createMemoryRouterWithRoutes(props)));
 
 const getEditor = () => screen.queryByTestId('Editor');
 const getMCQChooser = () => screen.queryByTestId('MCQChooser');
@@ -118,17 +118,17 @@ describe('AssessmentWorkspace', () => {
     });
   });
 
-  test('AssessmentWorkspace page "loading" content renders correctly', () => {
+  test('AssessmentWorkspace page "loading" content renders correctly', async () => {
     const app = createMemoryRouterWithRoutes(mockUndefinedAssessmentWorkspaceProps);
-    const tree = renderTreeJson(app);
+    const tree = await renderTreeJson(app);
     expect(tree).toMatchSnapshot();
 
     render(app);
     screen.getByText('Getting mission ready...');
   });
 
-  test('AssessmentWorkspace page with programming question renders correctly', () => {
-    const { container } = renderElement(mockProgrammingAssessmentWorkspaceProps);
+  test('AssessmentWorkspace page with programming question renders correctly', async () => {
+    const { container } = await renderElement(mockProgrammingAssessmentWorkspaceProps);
 
     expect(container).toMatchSnapshot();
     expect(getEditor()).toBeTruthy();
@@ -138,8 +138,8 @@ describe('AssessmentWorkspace', () => {
     expect(getContestVotingTab(container)).toBeNull();
   });
 
-  test('AssessmentWorkspace page with overdue assessment renders correctly', () => {
-    const { container } = renderElement(mockClosedProgrammingAssessmentWorkspaceProps);
+  test('AssessmentWorkspace page with overdue assessment renders correctly', async () => {
+    const { container } = await renderElement(mockClosedProgrammingAssessmentWorkspaceProps);
 
     expect(container).toMatchSnapshot();
     expect(getEditor()).toBeTruthy();
@@ -149,8 +149,8 @@ describe('AssessmentWorkspace', () => {
     expect(getContestVotingTab(container)).toBeNull();
   });
 
-  test('AssessmentWorkspace page with MCQ question renders correctly', () => {
-    const { container } = renderElement(mockMcqAssessmentWorkspaceProps);
+  test('AssessmentWorkspace page with MCQ question renders correctly', async () => {
+    const { container } = await renderElement(mockMcqAssessmentWorkspaceProps);
 
     expect(container).toMatchSnapshot();
     expect(getEditor()).toBeNull();
@@ -160,8 +160,8 @@ describe('AssessmentWorkspace', () => {
     expect(getContestVotingTab(container)).toBeNull();
   });
 
-  test('AssessmentWorkspace page with ContestVoting question renders correctly', () => {
-    const { container } = renderElement(mockContestVotingAssessmentWorkspaceProps);
+  test('AssessmentWorkspace page with ContestVoting question renders correctly', async () => {
+    const { container } = await renderElement(mockContestVotingAssessmentWorkspaceProps);
 
     expect(container).toMatchSnapshot();
     expect(getEditor()).toBeTruthy();
@@ -171,8 +171,8 @@ describe('AssessmentWorkspace', () => {
     expect(getContestVotingTab(container)).toBeTruthy();
   });
 
-  test('AssessmentWorkspace renders Grading tab correctly if the question has been graded', () => {
-    const { container } = renderElement(mockGradedProgrammingAssessmentWorkspaceProps);
+  test('AssessmentWorkspace renders Grading tab correctly if the question has been graded', async () => {
+    const { container } = await renderElement(mockGradedProgrammingAssessmentWorkspaceProps);
 
     expect(container).toMatchSnapshot();
     expect(getEditor()).toBeTruthy();

src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap

@@ -1442,9 +1442,21 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
           >
             <span
               aria-hidden="true"
-              class="bp5-icon bp5-icon-standard bp5-icon-arrow-left"
-              data-icon="arrow-left"
-            />
+              class="bp5-icon bp5-icon-arrow-left"
+            >
+              <svg
+                data-icon="arrow-left"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M13.99 6.99H4.41L7.7 3.7a1.003 1.003 0 00-1.42-1.42l-5 5a1.014 1.014 0 000 1.42l5 5a1.003 1.003 0 001.42-1.42L4.41 8.99H14c.55 0 1-.45 1-1s-.46-1-1.01-1z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
             <span
               class="bp5-button-text"
             >
@@ -4157,9 +4169,21 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                             >
                               <span
                                 aria-hidden="true"
-                                class="bp5-icon bp5-icon-large bp5-icon-tick"
-                                data-icon="tick"
-                              />
+                                class="bp5-icon bp5-icon-tick"
+                              >
+                                <svg
+                                  data-icon="tick"
+                                  height="20"
+                                  role="img"
+                                  viewBox="0 0 20 20"
+                                  width="20"
+                                >
+                                  <path
+                                    d="M17 4c-.28 0-.53.11-.71.29L7 13.59 3.71 10.3A.965.965 0 003 10a1.003 1.003 0 00-.71 1.71l4 4c.18.18.43.29.71.29s.53-.11.71-.29l10-10A1.003 1.003 0 0017 4z"
+                                    fill-rule="evenodd"
+                                  />
+                                </svg>
+                              </span>
                             </div>
                           </span>
                         </div>

src/commons/dropdown/__tests__/Dropdown.tsx

@@ -39,34 +39,34 @@ const getElement = (mockStore: Store<OverallState>) => (
   </Provider>
 );
 
-test('Dropdown does not mount Profile, DropdownCourses and DropdownCreateCourses components when a user is not logged in', () => {
+test('Dropdown does not mount Profile, DropdownCourses and DropdownCreateCourses components when a user is not logged in', async () => {
   const mockStore = getMockedStore({
     courses: [],
     courseId: 1
   });
   const app = getElement(mockStore);
-  const tree = renderTreeJson(app);
+  const tree = await renderTreeJson(app);
   expect(tree).toMatchSnapshot();
 
   // Expect the Profile component to NOT be mounted
-  const dropdown = renderTree(app);
+  const dropdown = await renderTree(app);
   expect(dropdown.root.findAllByType(Profile).length).toBe(0);
   expect(dropdown.root.findAllByType(DropdownCourses).length).toBe(0);
   expect(dropdown.root.findAllByType(DropdownCreateCourse).length).toBe(0);
 });
 
-test('Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateCourses components when a user is logged in', () => {
+test('Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateCourses components when a user is logged in', async () => {
   const mockStore = getMockedStore({
     name: 'Some user',
     courses: [],
     courseId: 1
   });
   const app = getElement(mockStore);
-  const tree = renderTreeJson(app);
+  const tree = await renderTreeJson(app);
   expect(tree).toMatchSnapshot();
 
   // Expect the Profile component to be mounted
-  const dropdown = renderTree(app);
+  const dropdown = await renderTree(app);
   expect(dropdown.root.findByType(Profile)).toBeTruthy();
   expect(dropdown.root.findByType(DropdownCourses)).toBeTruthy();
   expect(dropdown.root.findByType(DropdownCreateCourse)).toBeTruthy();

src/commons/navigationBar/subcomponents/__tests__/NavigationBarLangSelectButton.tsx

@@ -28,9 +28,9 @@ describe('NavigationBarLangSelectButton', () => {
     user = userEvent.setup();
   });
 
-  it('should render correctly', () => {
+  it('should render correctly', async () => {
     const { app } = createAppWithStore();
-    const wrapper = renderTreeJson(app);
+    const wrapper = await renderTreeJson(app);
     expect(wrapper).toMatchSnapshot();
   });
 

src/commons/profile/__tests__/Profile.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router';
 import { DeepPartial } from 'redux';
@@ -48,7 +48,7 @@ const createProfileWithStore = (storeOverrides?: DeepPartial<OverallState>) => {
   );
 };
 
-test('Profile renders correctly when there are no closed assessments', () => {
+test('Profile renders correctly when there are no closed assessments', async () => {
   const profile = createProfileWithStore({
     session: {
       name: 'yeet',
@@ -58,7 +58,7 @@ test('Profile renders correctly when there are no closed assessments', () => {
       assessmentConfigurations
     }
   });
-  render(profile);
+  await act(() => render(profile));
 
   // Expect the placeholder <div> to be rendered
   const placeholders = screen.getAllByTestId('profile-placeholder');
@@ -72,7 +72,7 @@ test('Profile renders correctly when there are no closed assessments', () => {
   expect(screen.queryAllByTestId('profile-callouts')).toHaveLength(0);
 });
 
-test('Profile renders correctly when there are closed and graded, or closed and not manually graded assessments', () => {
+test('Profile renders correctly when there are closed and graded, or closed and not manually graded assessments', async () => {
   // Only closed and graded, and closed and not manually graded assessments will be rendered in the Profile
   const profile = createProfileWithStore({
     session: {
@@ -83,7 +83,7 @@ test('Profile renders correctly when there are closed and graded, or closed and
       assessmentConfigurations
     }
   });
-  render(profile);
+  await act(() => render(profile));
 
   // Expect the placeholder <div> to NOT be rendered
   expect(screen.queryAllByTestId('profile-placeholder')).toHaveLength(0);