Update Dropdown_test.js

tests/components/Dropdown_test.js

@@ -3,13 +3,13 @@
  *
  * License: MIT
  */
-
 import React from "react";
-import { mount } from "enzyme";
+import { render, screen, fireEvent } from "@testing-library/react";
+import '@testing-library/jest-dom';  
 
 import icons from "../../src/icons";
 import Dropdown from "../../src/components/Dropdown";
 import DropdownItem from "../../src/components/DropdownItem";
 
 describe("Dropdown Component", () => {
   let testContext;
@@ -24,7 +24,7 @@
     testContext = {};
     testContext.selected = "metal";
     testContext.onChange = jest.fn();
-    testContext.component = mount(
+    render(
       <Dropdown
         items={dropdownItems}
         selected={testContext.selected}
@@ -34,48 +34,32 @@
   });
 
   it("renders without problems", () => {
-    expect(testContext.component).toBeDefined();
+    expect(screen.getByText("Metal")).toBeInTheDocument();
   });
 
   it("renders dropdown items", () => {
-    const items = testContext.component.find(DropdownItem);
-    expect(items).toHaveLength(4);
+    const items = screen.getAllByRole('menuitem');  
+    expect(items).toHaveLength(3);  
   });
 
   it("renders default selected dropdown item", () => {
-    const selected = testContext.component.find(DropdownItem).first();
-
-    const text = selected.find("span");
-    expect(text.text()).toEqual("Metal");
+    const selected = screen.getByText("Metal");
+    expect(selected).toBeInTheDocument();
   });
 
-  it("is possible to click on the dropdrown item", () => {
-    const item = testContext.component.find(DropdownItem).at(1);
-
-    expect(testContext.onChange).not.toHaveBeenCalled();
-
-    item.find("div").simulate("click");
-
+  it("is possible to click on the dropdown item", () => {
+    const item = screen.getByText("Metal");
+    fireEvent.click(item);
     expect(testContext.onChange).toHaveBeenCalled();
   });
 
   it("toggles dropdown on click", () => {
-    const wrapper = testContext.component.find("div").first();
-
-    wrapper.simulate("click");
-    expect(
-      testContext.component
-        .find("div")
-        .first()
-        .hasClass("dropdown__wrapper--open")
-    ).toEqual(true);
+    const wrapper = screen.getByText("Metal"); 
+    fireEvent.click(wrapper);
+    expect(wrapper.closest("div")).toHaveClass("dropdown__wrapper--open");
 
-    wrapper.simulate("click");
-    expect(
-      testContext.component
-        .find("div")
-        .first()
-        .hasClass("dropdown__wrapper--open")
-    ).toEqual(false);
+    fireEvent.click(wrapper);
+    expect(wrapper.closest("div")).not.toHaveClass("dropdown__wrapper--open");
   });
 });
+