Update remaining enzyme tests to RTL.

src/components/Form/Form.test.tsx

@@ -1,28 +1,36 @@
-import { shallow } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 
 import Form from "./Form";
 
 describe("Form ", () => {
   it("renders", () => {
-    const wrapper = shallow(<Form>Test content</Form>);
-    expect(wrapper).toMatchSnapshot();
+    render(
+      <Form name="this needs a name so RTL can find it">Test content</Form>
+    );
+    expect(screen.getByRole("form")).toMatchSnapshot();
   });
 
   it("can be inline", () => {
-    const wrapper = shallow(<Form inline={true} />);
-    expect(wrapper.prop("className").includes("p-form--inline")).toBe(true);
+    render(<Form name="this needs a name so RTL can find it" inline={true} />);
+    expect(screen.getByRole("form")).toHaveClass("p-form--inline");
   });
 
   it("can be stacked", () => {
-    const wrapper = shallow(<Form stacked={true} />);
-    expect(wrapper.prop("className").includes("p-form--stacked")).toBe(true);
+    render(<Form name="this needs a name so RTL can find it" stacked={true} />);
+    expect(screen.getByRole("form")).toHaveClass("p-form--stacked");
   });
 
   it("can add additional classes", () => {
-    const wrapper = shallow(<Form stacked={true} className="extra-class" />);
-    const className = wrapper.prop("className");
-    expect(className.includes("p-form")).toBe(true);
-    expect(className.includes("extra-class")).toBe(true);
+    render(
+      <Form
+        name="this needs a name so RTL can find it"
+        stacked={true}
+        className="extra-class"
+      />
+    );
+    const form = screen.getByRole("form");
+    expect(form).toHaveClass("p-form");
+    expect(form).toHaveClass("extra-class");
   });
 });

src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -2,7 +2,8 @@
 
 exports[`Form  renders 1`] = `
 <form
-  className=""
+  class=""
+  name="this needs a name so RTL can find it"
 >
   Test content
 </form>

src/components/Icon/Icon.test.tsx

@@ -1,27 +1,31 @@
-import { shallow } from "enzyme";
+import { render } from "@testing-library/react";
 import React from "react";
 
 import Icon, { ICONS } from "./Icon";
 
 describe("Icon", () => {
   it("renders", () => {
-    const wrapper = shallow(<Icon name={ICONS.success} />);
-    expect(wrapper).toMatchSnapshot();
+    const { container } = render(<Icon name={ICONS.success} />);
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it("sets correct class name based on given name", () => {
-    const wrapper = shallow(<Icon name="test" />);
-    expect(wrapper.prop("className").includes("p-icon--test")).toBe(true);
+    const { container } = render(<Icon name="test" />);
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstChild).toHaveClass("p-icon--test");
   });
 
   it("can be given a custom class name", () => {
-    const wrapper = shallow(<Icon className="custom-class" name="test" />);
-    expect(wrapper.prop("className")).toBe("custom-class p-icon--test");
+    const { container } = render(<Icon className="custom-class" name="test" />);
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstChild).toHaveClass("custom-class p-icon--test");
   });
 
   it("can be given standard HTML props", () => {
     const style = { width: "200px" };
-    const wrapper = shallow(<Icon name="test" style={style} />);
-    expect(wrapper.prop("style")).toBe(style);
+    const { container } = render(<Icon name="test" style={style} />);
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(container.firstChild).toHaveAttribute("style", "width: 200px;");
   });
 });

src/components/Icon/__snapshots__/Icon.test.tsx.snap

@@ -2,6 +2,6 @@
 
 exports[`Icon renders 1`] = `
 <i
-  className="p-icon--success"
+  class="p-icon--success"
 />
 `;

src/components/Input/Input.test.tsx

@@ -1,73 +1,84 @@
 import { render, screen } from "@testing-library/react";
-import { mount, shallow } from "enzyme";
 import React from "react";
 
 import Input from "./Input";
 
 describe("Input", () => {
+  it("displays the field label for text inputs", () => {
+    render(<Input type="text" label="text label" />);
+    expect(screen.getByText("text label")).toHaveClass("p-form__label");
+  });
+
   it("moves the label for radio buttons", () => {
-    const wrapper = shallow(<Input type="radio" />);
-    expect(wrapper.prop("label")).toBe("");
+    render(<Input type="radio" />);
+    expect(
+      // eslint-disable-next-line testing-library/no-node-access
+      document.querySelector(".p-radio__label")
+    ).toBeInTheDocument();
+    expect(
+      // eslint-disable-next-line testing-library/no-node-access
+      document.querySelector(".p-form__label")
+    ).not.toBeInTheDocument();
   });
 
   it("moves the label for checkboxes", () => {
-    const wrapper = shallow(<Input type="checkbox" />);
-    expect(wrapper.prop("label")).toBe("");
+    render(<Input type="checkbox" />);
+    expect(
+      // eslint-disable-next-line testing-library/no-node-access
+      document.querySelector(".p-checkbox__label")
+    ).toBeInTheDocument();
+    expect(
+      // eslint-disable-next-line testing-library/no-node-access
+      document.querySelector(".p-form__label")
+    ).not.toBeInTheDocument();
   });
 
   it("can take focus on first render", () => {
-    const container = document.createElement("div");
-    document.body.appendChild(container);
-    const wrapper = mount(<Input takeFocus />, { attachTo: container });
-    expect(wrapper.find("input").getDOMNode()).toBe(document.activeElement);
-    document.body.removeChild(container);
+    render(<Input takeFocus />);
+    expect(screen.getByRole("textbox")).toHaveFocus();
   });
 
   it("sets aria-invalid to false when there is no error", () => {
-    const wrapper = mount(<Input type="text" />);
-    expect(wrapper.find("input").prop("aria-invalid")).toBe(false);
+    render(<Input type="text" />);
+    expect(screen.getByRole("textbox")).not.toBeInvalid();
   });
 
   it("sets aria-invalid to true when there is an error", () => {
-    const wrapper = mount(<Input type="text" error="Incorrect value" />);
-    expect(wrapper.find("input").prop("aria-invalid")).toBe(true);
+    render(<Input type="text" error="Incorrect value" />);
+    expect(screen.getByRole("textbox")).toBeInvalid();
   });
 
   it("sets required field on input", () => {
-    const wrapper = mount(<Input type="text" required />);
-    expect(wrapper.find("input").prop("required")).toBe(true);
+    render(<Input type="text" required />);
+    expect(screen.getByRole("textbox")).toBeRequired();
   });
 
   it("can set required for a radiobutton", () => {
-    const wrapper = mount(<Input type="radio" required />);
-    expect(wrapper.find("input").prop("required")).toBe(true);
+    render(<Input type="radio" required />);
+    expect(screen.getByRole("radio")).toBeRequired();
   });
 
   it("can set required for a checkbox", () => {
-    const wrapper = mount(<Input type="checkbox" required />);
-    expect(wrapper.find("input").prop("required")).toBe(true);
+    render(<Input type="checkbox" required />);
+    expect(screen.getByRole("checkbox")).toBeRequired();
   });
 
   it("can set a label class name for a radiobutton", () => {
-    const wrapper = mount(
-      <Input type="radio" labelClassName="label-class-name" />
-    );
+    render(<Input type="radio" labelClassName="label-class-name" />);
     expect(
-      wrapper.find("label").prop("className").includes("label-class-name")
-    ).toBe(true);
+      // eslint-disable-next-line testing-library/no-node-access
+      document.querySelector(".p-radio")
+    ).toHaveClass("label-class-name");
   });
 
   it("can set a label class name for a checkbox", () => {
-    const wrapper = mount(
-      <Input type="checkbox" labelClassName="label-class-name" />
-    );
+    render(<Input type="checkbox" labelClassName="label-class-name" />);
     expect(
-      wrapper.find("label").prop("className").includes("label-class-name")
-    ).toBe(true);
+      // eslint-disable-next-line testing-library/no-node-access
+      document.querySelector(".p-checkbox")
+    ).toHaveClass("label-class-name");
   });
-});
 
-describe("Input RTL", () => {
   it("renders", () => {
     const { container } = render(<Input type="text" id="test-id" />);
     expect(container).toMatchSnapshot();

src/components/Input/__snapshots__/Input.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Input RTL renders 1`] = `
+exports[`Input renders 1`] = `
 <div>
   <div
     class="p-form__group p-form-validation"