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);
});