enzyme to RTL shallow tests migration (#4840)

src/app/base/components/Placeholder/Placeholder.test.tsx

@@ -1,4 +1,4 @@
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 
 import Placeholder from "./Placeholder";
 
@@ -12,14 +12,12 @@ describe("Placeholder", () => {
   });
 
   it("renders", () => {
-    const wrapper = shallow(<Placeholder>Placeholder text</Placeholder>);
-    expect(wrapper).toMatchSnapshot();
+    render(<Placeholder>Placeholder text</Placeholder>);
+    expect(screen.getByTestId("placeholder")).toBeInTheDocument();
   });
 
   it("does not return placeholder styling if loading is false", () => {
-    const wrapper = shallow(
-      <Placeholder loading={false}>Placeholder text</Placeholder>
-    );
-    expect(wrapper.find("[data-testid='placeholder']").exists()).toBe(false);
+    render(<Placeholder loading={false}>Placeholder text</Placeholder>);
+    expect(screen.queryByTestId("placeholder")).not.toBeInTheDocument();
   });
 });

src/app/base/components/PowerIcon/PowerIcon.test.tsx

@@ -1,27 +1,28 @@
-import { shallow } from "enzyme";
+/* eslint-disable testing-library/no-container */
+/* eslint-disable testing-library/no-node-access */
+import { render } from "@testing-library/react";
 
 import PowerIcon from "./PowerIcon";
 
 import { PowerState } from "app/store/types/enum";
 
 describe("PowerIcon", () => {
   it("renders", () => {
-    const wrapper = shallow(<PowerIcon powerState={PowerState.ON} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<PowerIcon powerState={PowerState.ON} />);
+    expect(container.querySelector("i")).toBeInTheDocument();
   });
 
-  it("can show a spinner regardless of the power state", () => {
-    const wrapper = shallow(
+  it("can show a spinner regardless of the power state", async () => {
+    const { container } = render(
       <PowerIcon powerState={PowerState.ON} showSpinner />
     );
-    expect(wrapper.find("Icon").prop("name")).toBe("spinner");
-    expect(wrapper.find("Icon").prop("className")).toBe("u-animation--spin");
+    expect(container.querySelector("i")).toHaveClass("u-animation--spin");
   });
 
   it("makes the icon inline if children are provided", () => {
-    const wrapper = shallow(
+    const { container } = render(
       <PowerIcon powerState={PowerState.ON}>On</PowerIcon>
     );
-    expect(wrapper.find("Icon").prop("className")).toBe("is-inline");
+    expect(container.querySelector("i")).toHaveClass("is-inline");
   });
 });

src/app/base/components/Stepper/Stepper.test.tsx

@@ -1,10 +1,10 @@
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 
 import Stepper from "./Stepper";
 
 describe("Stepper", () => {
   it("renders", () => {
-    const wrapper = shallow(
+    render(
       <Stepper
         currentStep="step2"
         items={[
@@ -14,11 +14,11 @@ describe("Stepper", () => {
         ]}
       />
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByRole("list")).toBeInTheDocument();
   });
 
   it("renders a step as checked if the index of the current step is higher", () => {
-    const wrapper = shallow(
+    render(
       <Stepper
         currentStep="step2"
         items={[
@@ -28,8 +28,8 @@ describe("Stepper", () => {
         ]}
       />
     );
-    expect(wrapper.find("[aria-checked=true]").at(0).text()).toBe("Step 1");
-    expect(wrapper.find("[aria-checked=false]").at(0).text()).toBe("Step 2");
-    expect(wrapper.find("[aria-checked=false]").at(1).text()).toBe("Step 3");
+    expect(screen.getByText("Step 1")).toHaveAttribute("aria-checked", "true");
+    expect(screen.getByText("Step 2")).toHaveAttribute("aria-checked", "false");
+    expect(screen.getByText("Step 3")).toHaveAttribute("aria-checked", "false");
   });
 });

src/app/base/components/Switch/Switch.test.tsx

@@ -1,11 +1,11 @@
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 
 import Switch from "./Switch";
 
 describe("Switch", () => {
   it("renders", () => {
-    const wrapper = shallow(<Switch />);
+    render(<Switch />);
 
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByRole("checkbox")).toBeInTheDocument();
   });
 });

src/app/base/components/TableActions/TableActions.test.tsx

@@ -1,59 +1,66 @@
-import { shallow } from "enzyme";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import TableActions from "./TableActions";
 
+import { renderWithBrowserRouter } from "testing/utils";
+
 describe("TableActions ", () => {
   it("renders a copy button if copy value provided", () => {
-    const wrapper = shallow(<TableActions copyValue="foo" />);
-    expect(wrapper.find("CopyButton").exists()).toBe(true);
+    renderWithBrowserRouter(<TableActions copyValue="foo" />);
+    expect(screen.getByText(/copy/i)).toBeInTheDocument();
   });
 
   it("renders an edit link if edit path provided", () => {
-    const wrapper = shallow(<TableActions editPath="/bar" />);
-    expect(wrapper.find("Button").props().to).toBe("/bar");
+    renderWithBrowserRouter(<TableActions editPath="/bar" />);
+    expect(screen.getByRole("link", { name: /edit/i })).toHaveAttribute(
+      "href",
+      "/bar"
+    );
   });
 
-  it("renders an edit button if edit on-click provided", () => {
+  it("renders an edit button if edit on-click provided", async () => {
     const onEdit = jest.fn();
-    const wrapper = shallow(<TableActions onEdit={onEdit} />);
-    wrapper.find("Button").simulate("click");
+    renderWithBrowserRouter(<TableActions onEdit={onEdit} />);
+    await userEvent.click(screen.getByText(/edit/i));
     expect(onEdit).toHaveBeenCalled();
-    expect(wrapper.find("Button").prop("element")).toBe(undefined);
+    expect(screen.getByRole("button", { name: /edit/i })).toBeInTheDocument();
   });
 
-  it("renders a delete button if delete function provided", () => {
+  it("renders a delete button if delete function provided", async () => {
     const onDelete = jest.fn();
-    const wrapper = shallow(<TableActions onDelete={onDelete} />);
-    expect(wrapper.find("Button .p-icon--delete").exists()).toBe(true);
-    wrapper.find("Button").simulate("click");
+    renderWithBrowserRouter(<TableActions onDelete={onDelete} />);
+    expect(screen.getByRole("button", { name: /delete/i })).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: /delete/i }));
     expect(onDelete).toHaveBeenCalled();
   });
 
   it("correctly renders tooltips", () => {
-    const wrapper = shallow(
+    renderWithBrowserRouter(
       <TableActions
         deleteTooltip="delete tooltip"
         editPath="/bar"
         editTooltip="edit tooltip"
         onDelete={jest.fn()}
       />
     );
-    expect(wrapper.find("Tooltip").at(0).prop("message")).toBe("edit tooltip");
-    expect(wrapper.find("Tooltip").at(1).prop("message")).toBe(
-      "delete tooltip"
-    );
+    expect(screen.getByText(/edit tooltip/i)).toBeInTheDocument();
+    expect(screen.getByText(/delete tooltip/i)).toBeInTheDocument();
   });
 
   it("correctly disables buttons", () => {
-    const wrapper = shallow(
+    renderWithBrowserRouter(
       <TableActions
         deleteDisabled
         editDisabled
         editPath="/bar"
         onDelete={jest.fn()}
       />
     );
-    expect(wrapper.find("Button").at(0).props().disabled).toBe(true);
-    expect(wrapper.find("Button").at(1).props().disabled).toBe(true);
+    expect(screen.getByRole("link", { name: /edit/i })).toHaveAttribute(
+      "aria-disabled",
+      "true"
+    );
+    expect(screen.getByRole("button", { name: /delete/i })).toBeDisabled();
   });
 });

src/app/base/components/TableDeleteConfirm/TableDeleteConfirm.test.tsx

@@ -1,10 +1,10 @@
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 
 import TableDeleteConfirm from "./TableDeleteConfirm";
 
 describe("TableDeleteConfirm", () => {
   it("renders", () => {
-    const wrapper = shallow(
+    render(
       <TableDeleteConfirm
         deleted={false}
         deleting={false}
@@ -14,6 +14,8 @@ describe("TableDeleteConfirm", () => {
         onConfirm={jest.fn()}
       />
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(
+      screen.getByText(/Are you sure you want to delete/i)
+    ).toBeInTheDocument();
   });
 });