Fix snapshot test that has async state updates

web-ui/src/components/edit_skills/EditSkillsCard.jsx

@@ -142,20 +142,20 @@ const EditSkillsCard = ({ skill }) => {
     if (second) {
       const secondProfile = selectProfileMap(state)[second];
       return rest.length ? (
-        <div>
+        <div data-testid="skill-submitted-by">
           Submitted By: {chip(firstProfile)} {chip(secondProfile)}
           {rest && ` and ${rest.length} others`}.
         </div>
       ) : (
-        <div>
+        <div data-testid="skill-submitted-by">
           Submitted By: {chip(firstProfile)} {chip(secondProfile)}
         </div>
       );
     } else
       return firstProfile ? (
-        <div>Submitted by: {chip(firstProfile)}</div>
+        <div data-testid="skill-submitted-by">Submitted by: {chip(firstProfile)}</div>
       ) : (
-        <div>Submitted by: Unknown</div>
+        <div data-testid="skill-submitted-by">Submitted by: Unknown</div>
       );
   };
 

web-ui/src/components/edit_skills/EditSkillsCard.test.jsx

@@ -70,13 +70,13 @@ afterAll(() => server.close());
 
 describe("EditSkillsCard", () => {
   it("renders correctly with skill", async () => {
-    act(() => snapshot(
-      <AppContextProvider value={initialState}>
+    await waitForSnapshot("skill-submitted-by",
+      (<AppContextProvider value={initialState}>
         <BrowserRouter>
           <EditSkillsCard skill={pendingSkill} />
         </BrowserRouter>
-      </AppContextProvider>
-    ));
+      </AppContextProvider>)
+    );
   });
 
   it("renders correctly", () => {

web-ui/src/components/edit_skills/__snapshots__/EditSkillsCard.test.jsx.snap

@@ -96,4 +96,81 @@ exports[`EditSkillsCard > renders correctly 1`] = `
 </div>
 `;
 
-exports[`EditSkillsCard > renders correctly with skill 1`] = `<div />`;
+exports[`EditSkillsCard > renders correctly with skill 1`] = `
+<div>
+  <div
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root pending-skills-card css-bhp9pd-MuiPaper-root-MuiCard-root"
+  >
+    <div
+      class="MuiCardHeader-root css-185gdzj-MuiCardHeader-root"
+    >
+      <div
+        class="MuiCardHeader-content css-1qbkelo-MuiCardHeader-content"
+      >
+        <span
+          class="MuiTypography-root MuiTypography-h5 MuiCardHeader-title css-1qvr50w-MuiTypography-root"
+        >
+          Le test skill
+        </span>
+        <span
+          class="MuiTypography-root MuiTypography-body1 MuiCardHeader-subheader css-nrdprl-MuiTypography-root"
+        >
+          le description
+        </span>
+      </div>
+    </div>
+    <div
+      class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
+    >
+      <div>
+        <div
+          data-testid="skill-submitted-by"
+        >
+          Submitted by: 
+          <div
+            class="MuiChip-root MuiChip-filled MuiChip-sizeMedium MuiChip-colorDefault MuiChip-filledDefault css-gavykb-MuiChip-root"
+          >
+            <div
+              class="MuiAvatar-root MuiAvatar-circular MuiChip-avatar MuiChip-avatarMedium MuiChip-avatarColorDefault css-1wlk0hk-MuiAvatar-root"
+            >
+              <img
+                class="MuiAvatar-img css-1pqm26d-MuiAvatar-img"
+                src="http://localhost:8080/services/member-profiles/member-photos/undefined"
+              />
+            </div>
+            <span
+              class="MuiChip-label MuiChip-labelMedium css-6od3lo-MuiChip-label"
+            >
+              Current User
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiCardActions-root MuiCardActions-spacing css-dnrpxu-MuiCardActions-root"
+    >
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+        tabindex="0"
+        type="button"
+      >
+        Edit
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+      <button
+        class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-colorPrimary css-1e6y48t-MuiButtonBase-root-MuiButton-root"
+        tabindex="0"
+        type="button"
+      >
+        Delete
+        <span
+          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+        />
+      </button>
+    </div>
+  </div>
+</div>
+`;

web-ui/src/setupTests.js

@@ -3,6 +3,7 @@ import React from "react";
 import createFetchMock from 'vitest-fetch-mock';;
 import requestAnimationFrame from "raf/polyfill";
 import { render } from "@testing-library/react";
+import {screen} from '@testing-library/dom';
 import '@testing-library/jest-dom';
 
 const mockModule = await vi.importActual("react-dom");
@@ -30,6 +31,11 @@ global.snapshot = (component, options) =>
   expect(render(component, options).container).toMatchSnapshot();
 global.rootSnapshot = (component, options) =>
   expect(render(component, options).baseElement).toMatchSnapshot();
+global.waitForSnapshot = async (testId, component, options) => {
+  const rendered = render(component, options);
+  await screen.findByTestId(testId);
+  expect(rendered.container).toMatchSnapshot();
+}
 
 global.window = global.window || {};
 global.window.requestAnimationFrame = global.requestAnimationFrame = requestAnimationFrame;