diff --git a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx index 24b2337a90..c94ea32525 100644 --- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx +++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.tests.jsx @@ -1,47 +1,59 @@ import React from "react"; -import { mount } from "enzyme"; +import { fireEvent, render, screen } from "@testing-library/react"; import Breadcrumbs from "pages/RegistrationPage/Breadcrumbs"; describe("Breadcrumbs - component", () => { it("renders 3 Button components", () => { - const component = mount(); - expect(component.find("button").length).toEqual(3); + render(); + expect(screen.getAllByRole("button").length).toEqual(3); }); it("renders page 1 Button as active when the page prop is 1", () => { - const component = mount(); - const page1Btn = component.find("button.registration-breadcrumbs__page--1"); - const page2Btn = component.find("button.registration-breadcrumbs__page--2"); - const page3Btn = component.find("button.registration-breadcrumbs__page--3"); + const { container } = render(); + const page1Btn = container.querySelector( + "button.registration-breadcrumbs__page--1" + ); + const page2Btn = container.querySelector( + "button.registration-breadcrumbs__page--2" + ); + const page3Btn = container.querySelector( + "button.registration-breadcrumbs__page--3" + ); - expect(page1Btn.prop("className")).toContain( + expect(page1Btn.className).toContain( "registration-breadcrumbs__page--active" ); - expect(page2Btn.prop("className")).not.toContain( + expect(page2Btn.className).not.toContain( "registration-breadcrumbs__page--active" ); - expect(page3Btn.prop("className")).not.toContain( + expect(page3Btn.className).not.toContain( "registration-breadcrumbs__page--active" ); }); it("calls the onClick prop with the page number when clicked", () => { const onClickSpy = jest.fn(); - const component = mount(); - const page1Btn = component.find("button.registration-breadcrumbs__page--1"); - const page2Btn = component.find("button.registration-breadcrumbs__page--2"); - const page3Btn = component.find("button.registration-breadcrumbs__page--3"); + const { container } = render(); + const page1Btn = container.querySelector( + "button.registration-breadcrumbs__page--1" + ); + const page2Btn = container.querySelector( + "button.registration-breadcrumbs__page--2" + ); + const page3Btn = container.querySelector( + "button.registration-breadcrumbs__page--3" + ); - page1Btn.simulate("click"); + fireEvent.click(page1Btn); expect(onClickSpy).toHaveBeenCalledWith(1); - page2Btn.simulate("click"); + fireEvent.click(page2Btn); expect(onClickSpy).toHaveBeenCalledWith(2); - page3Btn.simulate("click"); + fireEvent.click(page3Btn); expect(onClickSpy).toHaveBeenCalledWith(3); });