chore(test): rewritten target option test using rtl (#4885)

frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.tests.jsx

@@ -1,54 +1,56 @@
 import React from "react";
-import { mount } from "enzyme";
-import { noop } from "lodash";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 import { hostStub, labelStub } from "test/stubs";
 import TargetOption from "./TargetOption";
 
 describe("TargetOption - component", () => {
+  const onMoreInfoClickSpy = jest.fn();
+  const onMoreInfoClick = () => {
+    return onMoreInfoClickSpy;
+  };
   it("renders a label option for label targets", () => {
     const count = 5;
-    const component = mount(
-      <TargetOption onMoreInfoClick={noop} target={{ ...labelStub, count }} />
+    const { container } = render(
+      <TargetOption
+        onMoreInfoClick={onMoreInfoClick}
+        target={{ ...labelStub, count }}
+      />
     );
-    expect(component.find(".is-label").length).toEqual(1);
-    expect(component.text()).toContain(`${count} hosts`);
+    expect(container.querySelectorAll(".is-label").length).toEqual(1);
+    expect(screen.getByText(`${count} hosts`)).toBeInTheDocument();
   });
 
   it("renders a host option for host targets", () => {
-    const component = mount(
+    const { container } = render(
       <TargetOption
-        onMoreInfoClick={noop}
+        onMoreInfoClick={onMoreInfoClick}
         target={{ ...hostStub, platform: "windows" }}
       />
     );
-    expect(component.find(".is-host").length).toEqual(1);
-    expect(component.find("i.fleeticon-windows").length).toEqual(1);
-    expect(component.text()).toContain(hostStub.primary_ip);
+    expect(container.querySelectorAll(".is-host").length).toEqual(1);
+    expect(container.querySelectorAll("i.fleeticon-windows").length).toEqual(1);
+    expect(screen.getByText(hostStub.primary_ip)).toBeInTheDocument();
   });
 
   it("calls the onSelect prop when + icon button is clicked", () => {
     const onSelectSpy = jest.fn();
-    const component = mount(
+    const { container } = render(
       <TargetOption
-        onMoreInfoClick={noop}
+        onMoreInfoClick={onMoreInfoClick}
         onSelect={onSelectSpy}
         target={hostStub}
       />
     );
-    component.find(".target-option__add-btn").simulate("click");
+    fireEvent.click(container.querySelector(".target-option__add-btn"));
     expect(onSelectSpy).toHaveBeenCalled();
   });
 
   it("calls the onMoreInfoClick prop when the item content is clicked", () => {
-    const onMoreInfoClickSpy = jest.fn();
-    const onMoreInfoClick = () => {
-      return onMoreInfoClickSpy;
-    };
-    const component = mount(
+    const { container } = render(
       <TargetOption onMoreInfoClick={onMoreInfoClick} target={hostStub} />
     );
-    component.find(".target-option__target-content").simulate("click");
+    fireEvent.click(container.querySelector(".target-option__target-content"));
     expect(onMoreInfoClickSpy).toHaveBeenCalled();
   });
 });