@truedat/dd 7.5.9 → 7.5.11

package/src/components/__tests__/LineageRoutes.spec.js

@@ -1,14 +1,107 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
+import { useAuthorized } from "@truedat/core/hooks/useAuthorized";
+import { GRAPHS, GRAPH, LINEAGE_EVENTS, SAMPLE } from "@truedat/core/routes";
 import { LineageRoutes } from "../LineageRoutes";
 
-jest.mock("@truedat/core/hooks", () => ({
-  useAuthorized: jest.fn(() => true),
+// Mock the hooks module to use the mock implementation
+jest.mock("@truedat/core/hooks/useAuthorized");
+
+// Mock components used in LineageRoutes
+jest.mock(
+  "../LineageEvents",
+  () =>
+    function LineageEvents() {
+      return <div>LineageEvents</div>;
+    }
+);
+jest.mock(
+  "../LineageGraph",
+  () =>
+    function LineageGraph() {
+      return <div>LineageGraph</div>;
+    }
+);
+jest.mock(
+  "../LineageSample",
+  () =>
+    function LineageSample() {
+      return <div>LineageSample</div>;
+    }
+);
+jest.mock(
+  "../LineageForm",
+  () =>
+    function LineageForm() {
+      return <div>LineageForm</div>;
+    }
+);
+jest.mock(
+  "../GraphLoader",
+  () =>
+    function GraphLoader() {
+      return <div>GraphLoader</div>;
+    }
+);
+jest.mock(
+  "../GraphRedirector",
+  () =>
+    function GraphRedirector() {
+      return <div>GraphRedirector</div>;
+    }
+);
+jest.mock("@truedat/core/components", () => ({
+  Unauthorized: function Unauthorized() {
+    return <div>Unauthorized</div>;
+  },
+  ...jest.requireActual("@truedat/core/components"),
 }));
 
 describe("<LineageRoutes />", () => {
-  it("matches the latest snapshot", () => {
-    const { container } = render(<LineageRoutes />);
-    expect(container).toMatchSnapshot();
+  it("renders correctly with default route", async () => {
+    const rendered = render(<LineageRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  // Test each specific route in the component
+  it("renders correctly with GRAPHS route", async () => {
+    const rendered = render(<LineageRoutes />, {
+      routes: [GRAPHS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with GRAPH route", async () => {
+    const rendered = render(<LineageRoutes />, {
+      routes: [GRAPH],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with LINEAGE_EVENTS route", async () => {
+    const rendered = render(<LineageRoutes />, {
+      routes: [LINEAGE_EVENTS],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders correctly with SAMPLE route", async () => {
+    const rendered = render(<LineageRoutes />, {
+      routes: [SAMPLE],
+    });
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("renders unauthorized component when not authorized", async () => {
+    // For this test only, mock the return value as false
+    useAuthorized.mockReturnValueOnce(false);
+
+    const rendered = render(<LineageRoutes />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/MyGrantRequests.spec.js

@@ -1,27 +1,9 @@
-import React from "react";
+import userEvent from "@testing-library/user-event";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
-import userEvent from "@testing-library/user-event";
 import { MyGrantRequests } from "../MyGrantRequests";
 
 describe("<MyGrantRequests />", () => {
-  const renderOpts = {
-    messages: {
-      en: {
-        "grantRequests.header.me": "my grant requests",
-        "grantRequests.subheader.me": "grant requests demanded by me",
-        "grantRequests.filters": "filters",
-        "grantRequest.header.status": "status",
-        "grantRequest.content.failed": "failed",
-        "grantRequest.content.pending": "pending",
-        "grantRequest.content.approved": "approved",
-        "grantRequest.content.cancelled": "cancelled",
-        "grantRequest.content.rejected": "rejected",
-        "grantRequest.content.processing": "processing",
-        "grantRequest.content.processed": "processed",
-      },
-    },
-  };
   it("matches the latest snapshot", async () => {
     const grantRequests = [
       {
@@ -35,17 +17,14 @@ describe("<MyGrantRequests />", () => {
     const columns = [{ name: "data_structure" }, { name: "status" }];
     const setGrantRequestsQuery = jest.fn();
     const props = { columns, grantRequests, setGrantRequestsQuery };
-    const { container, queryByText } = render(
-      <MyGrantRequests {...props} />,
-      renderOpts
-    );
-    expect(container).toMatchSnapshot();
+    const rendered = render(<MyGrantRequests {...props} />);
+    expect(rendered.container).toMatchSnapshot();
     await waitFor(() => {
-      expect(queryByText(/foo/)).toBeTruthy();
+      expect(rendered.queryByText(/foo/i)).toBeInTheDocument();
     });
 
     await waitFor(() => {
-      expect(queryByText(/pending/)).toBeTruthy();
+      expect(rendered.queryByText(/pending/i)).toBeInTheDocument();
     });
   });
 
@@ -62,20 +41,25 @@ describe("<MyGrantRequests />", () => {
     const columns = [{ name: "data_structure" }, { name: "status" }];
     const setGrantRequestsQuery = jest.fn();
     const props = { columns, grantRequests, setGrantRequestsQuery };
-    const { findByText } = render(<MyGrantRequests {...props} />, renderOpts);
-    userEvent.click(await findByText(/processing/));
+    const rendered = render(<MyGrantRequests {...props} />);
+    const user = userEvent.setup({ delay: null });
+
+    await user.click(await rendered.findByText(/processing/i));
     expect(setGrantRequestsQuery).toHaveBeenCalledWith({
       status: "pending,approved,rejected",
     });
-    userEvent.click(await findByText(/processing/));
+
+    await user.click(await rendered.findByText(/processing/i));
     expect(setGrantRequestsQuery).toHaveBeenCalledWith({
       status: "pending,approved,rejected,processing",
     });
-    userEvent.click(await findByText(/failed/));
+
+    await user.click(await rendered.findByText(/failed/i));
     expect(setGrantRequestsQuery).toHaveBeenCalledWith({
       status: "pending,approved,rejected,processing,failed",
     });
-    userEvent.click(await findByText(/cancelled/));
+
+    await user.click(await rendered.findByText(/cancelled/i));
     expect(setGrantRequestsQuery).toHaveBeenCalledWith({
       status: "pending,approved,rejected,processing,failed,cancelled",
     });

package/src/components/__tests__/PendingStructureNoteRow.spec.js

@@ -1,16 +1,13 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import userEvent from "@testing-library/user-event";
 import { getStructureNotesColumnsSelector } from "../../selectors";
 import PendingStructureNoteRow from "../PendingStructureNoteRow";
 
-const mockHistory = {
-  push: jest.fn(),
-};
+const mockHistory = jest.fn();
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useHistory: () => mockHistory,
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useNavigate: () => mockHistory,
 }));
 
 const columns = getStructureNotesColumnsSelector({});

package/src/components/__tests__/PendingStructureNotes.spec.js

@@ -1,8 +1,9 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import PendingStructureNotes from "../PendingStructureNotes";
 
+jest.mock("@truedat/core/hooks/useUserFilters");
+
 const data = {
   data: [
     {
@@ -51,36 +52,15 @@ jest.mock("@truedat/dd/hooks/useStructures", () => {
   };
 });
 
-const messages = {
-  en: {
-    "pendingStructureNotes.props.domain": "Domain",
-    "pendingStructureNotes.props.status": "Status",
-    "pendingStructureNotes.props.name": "Name",
-    "search.placeholder": "Search...",
-    "pendingStructureNotes.props.path": "Path",
-    "pendingStructureNotes.props.system": "System",
-    "pendingStructureNotes.search.results.empty": "Empty",
-    "structures.retrieved.results": "{count} structures found",
-    "pendingStructureNotes.subheader": "Subheader",
-    "pendingStructureNotes.header": "Header",
-    "pendingStructureNotes.status.rejected": "Rejected",
-    "pendingStructureNotes.status.draft": "Draft",
-  },
-};
-
-const renderOpts = { messages };
-
 describe("<PendingStructureNotes />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, queryByText } = render(
-      <PendingStructureNotes />,
-      renderOpts
-    );
+    const rendered = render(<PendingStructureNotes />);
+    await waitForLoad(rendered);
 
-    await waitFor(() => {
-      expect(queryByText(/foo system/)).toBeTruthy();
-    });
+    await waitFor(() =>
+      expect(rendered.getByText(/foo system/i)).toBeInTheDocument()
+    );
 
-    expect(container).toMatchSnapshot();
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/PendingStructureNotesLabelResults.spec.js

@@ -1,5 +1,4 @@
-import React from "react";
-import { render } from "@truedat/test/render";
+import { render, waitForLoad } from "@truedat/test/render";
 import { SearchContextProvider } from "@truedat/core/search/SearchContext";
 import PendingStructureNotesLabelResults from "../PendingStructureNotesLabelResults";
 
@@ -34,12 +33,13 @@ const searchProps = {
 
 describe("<PendingStructureNotesLabelResults />", () => {
   it("matches the latest snapshot", async () => {
-    const { container, findByText } = render(
+    const rendered = render(
       <SearchContextProvider {...searchProps}>
         <PendingStructureNotesLabelResults />
       </SearchContextProvider>
     );
-    await findByText(/22 structures found/);
-    expect(container).toMatchSnapshot();
+    await waitForLoad(rendered);
+    await rendered.findByText(/structures.retrieved.results/i);
+    expect(rendered.container).toMatchSnapshot();
   });
 });

package/src/components/__tests__/PendingStructureNotesPagination.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@truedat/test/render";
 import { SearchContextProvider } from "@truedat/core/search/SearchContext";
 import PendingStructureNotesPagination from "../PendingStructureNotesPagination";

package/src/components/__tests__/PendingStructureNotesTable.spec.js

@@ -1,4 +1,3 @@
-import React from "react";
 import { waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import SearchContext from "@truedat/core/search/SearchContext";
@@ -59,9 +58,9 @@ describe("<PendingStructureNotesTable />", () => {
 
   it("matches the latest snapshot", async () => {
     const { container, queryByText } = render(
-      <SearchContext.Provider value={searchProps}>
+      <SearchContext value={searchProps}>
         <PendingStructureNotesTable {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();
@@ -82,9 +81,9 @@ describe("<PendingStructureNotesTable />", () => {
     };
 
     const { container, queryByText } = render(
-      <SearchContext.Provider value={newSearchProps}>
+      <SearchContext value={newSearchProps}>
         <PendingStructureNotesTable {...props} />
-      </SearchContext.Provider>,
+      </SearchContext>,
       renderOpts
     );
     expect(container).toMatchSnapshot();

package/src/components/__tests__/ProfileExecution.spec.js

@@ -1,101 +1,105 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
-import { Event, EventFeed, ProfileExecution } from "../ProfileExecution";
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
+import { render, waitForLoad } from "@truedat/test/render";
+import { ProfileExecution, EventFeed, Event } from "../ProfileExecution";
 
 const profile_events = [
-  { type: "PENDING", message: "foo", inserted_at: "2019-09-20 17:01:00" },
-  { type: "SUCCEEDED", message: "baz", inserted_at: "2019-09-20 17:08:00" },
-  { type: "STARTED", message: "bar", inserted_at: "2019-09-20 17:06:00" }
+  { type: "PENDING", message: "msg1", inserted_at: "2019-09-20 17:01:00" },
+  { type: "SUCCEEDED", message: "msg2", inserted_at: "2019-09-20 17:08:00" },
+  { type: "STARTED", message: "msg3", inserted_at: "2019-09-20 17:06:00" },
 ];
 
 const _embedded = {
   data_structure: { id: 1, external_id: "foo" },
   profile: {
     value: { foo: "bar" },
-    updated_at: "2019-09-20 10:55:00"
+    updated_at: "2019-09-20 10:55:00",
   },
   profile_events,
-  latest: { name: "baz" }
+  latest: { name: "baz" },
 };
 
 const execution = {
   id: 2,
-  _embedded
+  _embedded,
 };
 
 describe("<ProfileExecution />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ProfileExecution profileExecution={execution} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ProfileExecution profileExecution={execution} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders null if execution is not provided", () => {
-    const wrapper = shallow(<ProfileExecution />);
-    expect(wrapper.type()).toBeNull();
+  it("renders null if execution is not provided", async () => {
+    const rendered = render(<ProfileExecution />);
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
   });
 
-  it("renders message when we don't have execution events", () => {
+  it("renders message when we don't have execution events", async () => {
     const embeddedProp = { ..._embedded, profile_events: [] };
     const executionProp = { ...execution, _embedded: embeddedProp };
-    const wrapper = shallow(
+    const rendered = render(
       <ProfileExecution profileExecution={executionProp} />
     );
+    await waitForLoad(rendered);
+    expect(rendered.getByText(/execution.pending.header/i)).toBeInTheDocument();
     expect(
-      wrapper.find({
-        header: "execution.pending.header",
-        content: "execution.pending.content"
-      })
-    ).toBeTruthy();
+      rendered.getByText(/execution.pending.content/i)
+    ).toBeInTheDocument();
   });
 
-  it("renders event feed when we have profile events", () => {
-    const wrapper = shallow(<ProfileExecution profileExecution={execution} />);
-    expect(wrapper.find("EventFeed")).toBeTruthy();
-    expect(wrapper.find("EventFeed").prop("events")).toEqual(
-      _embedded.profile_events
-    );
+  it("renders event feed when we have profile events", async () => {
+    const rendered = render(<ProfileExecution profileExecution={execution} />);
+    await waitForLoad(rendered);
+    expect(rendered.getByText("msg1")).toBeInTheDocument();
+    expect(rendered.getByText("msg2")).toBeInTheDocument();
+    expect(rendered.getByText("msg3")).toBeInTheDocument();
   });
 });
 
 describe("<EventFeed />", () => {
-  it("matches the latest snapshot when we have pending executions", () => {
-    const wrapper = shallow(<EventFeed events={profile_events} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot when we have pending executions", async () => {
+    const rendered = render(<EventFeed events={profile_events} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders null if not events", () => {
-    const wrapper = shallow(<EventFeed />);
-    expect(wrapper.type()).toBeNull();
+  it("renders null if not events", async () => {
+    const rendered = render(<EventFeed />);
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
   });
 
-  it("renders events ordered by date", () => {
-    const wrapper = shallow(<EventFeed events={profile_events} />);
-    const e1 = wrapper.find("Event").get(0);
-    const e2 = wrapper.find("Event").get(1);
-    const e3 = wrapper.find("Event").get(2);
-    expect(e1.props).toEqual(profile_events[0]);
-    expect(e2.props).toEqual(profile_events[2]);
-    expect(e3.props).toEqual(profile_events[1]);
+  it("renders events ordered by date", async () => {
+    const rendered = render(<EventFeed events={profile_events} />);
+    await waitForLoad(rendered);
+
+    const eventElements = rendered.container.querySelectorAll(".event");
+    expect(eventElements.length).toBe(3);
+
+    // Check for event content in the correct order
+    const eventTexts = Array.from(eventElements).map((el) => el.textContent);
+    expect(eventTexts[0]).toContain(profile_events[0].message);
+    expect(eventTexts[1]).toContain(profile_events[2].message);
+    expect(eventTexts[2]).toContain(profile_events[1].message);
   });
 });
 
 describe("<Event />", () => {
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<Event {...profile_events[0]} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<Event {...profile_events[0]} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders default icon on unknown type", () => {
+  it("renders default icon on unknown type", async () => {
     const event = { ...profile_events[0], type: "FOO" };
-    const wrapper = shallow(<Event {...event} />);
-    expect(wrapper.find("FeedLabel").prop("icon")).toEqual({
-      name: "info circle",
-      color: "blue"
-    });
+    const rendered = render(<Event {...event} />);
+    await waitForLoad(rendered);
+
+    // Check for the info circle icon
+    const iconElement = rendered.container.querySelector(".info.circle.icon");
+    expect(iconElement).toBeInTheDocument();
+    expect(iconElement.classList.contains("blue")).toBe(true);
   });
 });

package/src/components/__tests__/ProfileExecutionLoader.spec.js

@@ -1,36 +1,43 @@
-import React from "react";
-import { mount, shallow } from "enzyme";
+import { render, waitForLoad } from "@truedat/test/render";
 import { ProfileExecutionLoader } from "../ProfileExecutionLoader";
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useParams: () => ({ id: 1 })
+jest.mock("react-router", () => ({
+  ...jest.requireActual("react-router"),
+  useParams: () => ({ id: 1 }),
 }));
 
 describe("<ProfileExecutionLoader />", () => {
-  const clearProfileExecution = jest.fn();
-  const fetchProfileExecution = jest.fn();
-  const props = { clearProfileExecution, fetchProfileExecution };
-
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ProfileExecutionLoader />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const clearProfileExecution = jest.fn();
+    const fetchProfileExecution = jest.fn();
+    const props = { clearProfileExecution, fetchProfileExecution };
+    const rendered = render(<ProfileExecutionLoader {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("calls fetchStructure when component mounts but not when it unmounts", () => {
-    const wrapper = mount(<ProfileExecutionLoader {...props} />);
+  it("calls fetchStructure when component mounts but not when it unmounts", async () => {
+    const clearProfileExecution = jest.fn();
+    const fetchProfileExecution = jest.fn();
+    const props = { clearProfileExecution, fetchProfileExecution };
+    const rendered = render(<ProfileExecutionLoader {...props} />);
+    await waitForLoad(rendered);
     expect(fetchProfileExecution).toHaveBeenCalledTimes(1);
     expect(fetchProfileExecution).toHaveBeenCalledWith({ id: 1 });
 
-    wrapper.unmount();
-    expect(props.fetchProfileExecution).toHaveBeenCalledTimes(1);
+    rendered.unmount();
+    expect(fetchProfileExecution).toHaveBeenCalledTimes(1);
   });
 
-  it("calls clearProfileExecution when component unmounts but not when it mounts", () => {
+  it("calls clearProfileExecution when component unmounts but not when it mounts", async () => {
+    const clearProfileExecution = jest.fn();
+    const fetchProfileExecution = jest.fn();
+    const props = { clearProfileExecution, fetchProfileExecution };
     clearProfileExecution.mockClear();
-    const wrapper = mount(<ProfileExecutionLoader {...props} />);
+    const rendered = render(<ProfileExecutionLoader {...props} />);
+    await waitForLoad(rendered);
     expect(clearProfileExecution).toHaveBeenCalledTimes(0);
-    wrapper.unmount();
+    rendered.unmount();
     expect(clearProfileExecution).toHaveBeenCalledTimes(1);
   });
 });

package/src/components/__tests__/ProfileGroup.spec.js

@@ -1,30 +1,27 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { intl } from "@truedat/test/intl-stub";
+import { render, waitForLoad } from "@truedat/test/render";
 import { columns, ExecutionRow, ProfileGroup } from "../ProfileGroup";
 
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
 const execution = {
-  id: 2,
+  id: "2",
   _embedded: {
-    data_structure: { id: 1, external_id: "foo" },
+    data_structure: { id: "1", external_id: "foo" },
     profile: {
       value: { foo: "bar" },
-      updated_at: "2019-09-20 10:55:00"
+      updated_at: "2019-09-20 10:55:00",
     },
     profile_events: [{ type: "PENDING", message: "foo" }],
-    latest: { name: "baz", ancestry: [{ data_structure_id: 2, name: "bar" }] }
-  }
+    latest: {
+      name: "baz",
+      ancestry: [{ data_structure_id: "2", name: "bar" }],
+    },
+  },
 };
 
 const profileGroup = {
-  id: 1,
+  id: "1",
   _embedded: {
-    executions: [execution]
-  }
+    executions: [execution],
+  },
 };
 
 const profileGroupLoading = false;
@@ -32,24 +29,24 @@ const profileGroupLoading = false;
 describe("<ProfileGroup />", () => {
   const props = { profileGroup, profileGroupLoading };
 
-  it("matches the latest snapshot", () => {
-    const wrapper = shallow(<ProfileGroup {...props} />);
-    expect(wrapper).toMatchSnapshot();
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ProfileGroup {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
   });
 
-  it("renders null when profileGroupLoading is true", () => {
-    const wrapper = shallow(
+  it("renders null when profileGroupLoading is true", async () => {
+    const rendered = render(
       <ProfileGroup {...{ ...props, profileGroupLoading: true }} />
     );
-    expect(wrapper.type()).toBeNull();
+    await waitForLoad(rendered);
+    expect(rendered.container.firstChild).toBeNull();
   });
 
   it("renders as many table rows as executions", async () => {
-    const wrapper = shallow(<ProfileGroup {...props} />);
-    expect(wrapper.find("TableRow").length).toBe(
-      profileGroup._embedded.executions.length
-    );
-    expect(wrapper.find("ExecutionRow").length).toBe(
+    const rendered = render(<ProfileGroup {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.getAllByRole("row").length - 1).toBe(
       profileGroup._embedded.executions.length
     );
   });
@@ -58,8 +55,9 @@ describe("<ProfileGroup />", () => {
 describe("<ExecutionRow />", () => {
   const props = { execution: { ...execution, profileGroup } };
 
-  it("renders all columns when props match", () => {
-    const wrapper = shallow(<ExecutionRow {...props} />);
-    expect(wrapper.find("TableCell").length).toBe(columns.length);
+  it("renders all columns when props match", async () => {
+    const rendered = render(<ExecutionRow {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.getAllByRole("cell").length).toBe(columns.length);
   });
 });