diff --git a/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.tests.jsx b/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.tests.jsx
index 967583b12..7c40d5232 100644
--- a/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.tests.jsx
+++ b/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.tests.jsx
@@ -1,111 +1,157 @@
 import React from "react";
-import { mount } from "enzyme";
-import { noop } from "lodash";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import ChangePasswordForm from "components/forms/ChangePasswordForm";
-import helpers from "test/helpers";
-
-const { fillInFormInput, itBehavesLikeAFormInputElement } = helpers;
 
 describe("ChangePasswordForm - component", () => {
+  const props = {
+    handleSubmit: jest.fn(),
+    onCancel: jest.fn(),
+  };
   it("has the correct fields", () => {
-    const form = mount(
-      <ChangePasswordForm handleSubmit={noop} onCancel={noop} />
-    );
+    render(<ChangePasswordForm {...props} />);
 
-    itBehavesLikeAFormInputElement(form, "old_password");
-    itBehavesLikeAFormInputElement(form, "new_password");
-    itBehavesLikeAFormInputElement(form, "new_password_confirmation");
+    expect(screen.getByLabelText("Original password")).toBeInTheDocument();
+    expect(screen.getByLabelText("New password")).toBeInTheDocument();
+    expect(
+      screen.getByLabelText("New password confirmation")
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getByRole("button", { name: "Change password" })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
   });
 
   it("renders the password fields as HTML password fields", () => {
-    const form = mount(
-      <ChangePasswordForm handleSubmit={noop} onCancel={noop} />
-    );
-    const passwordField = form.find('input[name="old_password"]');
-    const newPasswordField = form.find('input[name="new_password"]');
-    const newPasswordConfirmationField = form.find(
-      'input[name="new_password_confirmation"]'
-    );
+    render(<ChangePasswordForm {...props} />);
 
-    expect(passwordField.prop("type")).toEqual("password");
-    expect(newPasswordField.prop("type")).toEqual("password");
-    expect(newPasswordConfirmationField.prop("type")).toEqual("password");
+    expect(screen.getByLabelText("Original password")).toHaveAttribute(
+      "type",
+      "password"
+    );
+    expect(screen.getByLabelText("New password")).toHaveAttribute(
+      "type",
+      "password"
+    );
+    expect(screen.getByLabelText("New password confirmation")).toHaveAttribute(
+      "type",
+      "password"
+    );
   });
 
-  it("calls the handleSubmit props with form data", () => {
-    const handleSubmitSpy = jest.fn();
-    const form = mount(
-      <ChangePasswordForm handleSubmit={handleSubmitSpy} onCancel={noop} />
-    ).find("form");
-    const expectedFormData = {
-      old_password: "p@ssw0rd",
-      new_password: "p@ssw0rd1",
-      new_password_confirmation: "p@ssw0rd1",
-    };
-    const passwordInput = form.find({ name: "old_password" }).find("input");
-    const newPasswordInput = form.find({ name: "new_password" }).find("input");
-    const newPasswordConfirmationInput = form
-      .find({ name: "new_password_confirmation" })
-      .find("input");
+  it("should trigger validation for all fields", async () => {
+    render(<ChangePasswordForm {...props} />);
 
-    fillInFormInput(passwordInput, expectedFormData.old_password);
-    fillInFormInput(newPasswordInput, expectedFormData.new_password);
-    fillInFormInput(
-      newPasswordConfirmationInput,
-      expectedFormData.new_password_confirmation
-    );
-
-    form.simulate("submit");
-
-    expect(handleSubmitSpy).toHaveBeenCalledWith(expectedFormData);
+    // when
+    fireEvent.click(screen.getByRole("button", { name: "Change password" }));
+    // then
+    expect(props.handleSubmit).not.toHaveBeenCalled();
+    expect(
+      await screen.findByText("Password must be present")
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText("New password must be present")
+    ).toBeInTheDocument();
+    expect(
+      await screen.findByText("New password confirmation must be present")
+    ).toBeInTheDocument();
   });
 
-  it("calls the onCancel prop when CANCEL is clicked", () => {
-    const onCancelSpy = jest.fn();
-    const form = mount(
-      <ChangePasswordForm handleSubmit={noop} onCancel={onCancelSpy} />
-    ).find("form");
-    const cancelBtn = form
-      .find("Button")
-      .findWhere((n) => n.prop("children") === "Cancel")
-      .find("button");
-
-    cancelBtn.simulate("click");
-
-    expect(onCancelSpy).toHaveBeenCalled();
-  });
-
-  it("does not submit when the new password is invalid", () => {
-    const handleSubmitSpy = jest.fn();
-    const component = mount(
-      <ChangePasswordForm handleSubmit={handleSubmitSpy} onCancel={noop} />
-    );
-    const form = component.find("form");
+  it("does not submit when the new password is invalid", async () => {
+    render(<ChangePasswordForm {...props} />);
     const expectedFormData = {
       old_password: "p@ssw0rd",
       new_password: "new_password",
       new_password_confirmation: "new_password",
     };
-    const passwordInput = form.find({ name: "old_password" }).find("input");
-    const newPasswordInput = form.find({ name: "new_password" }).find("input");
-    const newPasswordConfirmationInput = form
-      .find({ name: "new_password_confirmation" })
-      .find("input");
 
-    fillInFormInput(passwordInput, expectedFormData.old_password);
-    fillInFormInput(newPasswordInput, expectedFormData.new_password);
-    fillInFormInput(
-      newPasswordConfirmationInput,
+    // when
+    userEvent.type(
+      screen.getByLabelText("Original password"),
+      expectedFormData.old_password
+    );
+    userEvent.type(
+      screen.getByLabelText("New password"),
+      expectedFormData.new_password
+    );
+    userEvent.type(
+      screen.getByLabelText("New password confirmation"),
       expectedFormData.new_password_confirmation
     );
+    fireEvent.click(screen.getByRole("button", { name: "Change password" }));
+    // then
+    expect(props.handleSubmit).not.toHaveBeenCalled();
+    expect(
+      await screen.findByText("Password must meet the criteria below")
+    ).toBeInTheDocument();
+  });
 
-    form.simulate("submit");
+  it("does not submit when new confirm password is not matching with new password", async () => {
+    render(<ChangePasswordForm {...props} />);
+    const expectedFormData = {
+      old_password: "p@ssw0rd",
+      new_password: "new_password",
+      new_password_confirmation: "new_password_1",
+    };
 
-    expect(handleSubmitSpy).not.toHaveBeenCalled();
+    // when
+    userEvent.type(
+      screen.getByLabelText("Original password"),
+      expectedFormData.old_password
+    );
+    userEvent.type(
+      screen.getByLabelText("New password"),
+      expectedFormData.new_password
+    );
+    userEvent.type(
+      screen.getByLabelText("New password confirmation"),
+      expectedFormData.new_password_confirmation
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Change password" }));
+    // then
+    expect(props.handleSubmit).not.toHaveBeenCalled();
+    expect(
+      await screen.findByText(
+        "New password confirmation does not match new password"
+      )
+    ).toBeInTheDocument();
+  });
 
-    expect(component.state("errors")).toMatchObject({
-      new_password: "Password must meet the criteria below",
-    });
+  it("calls the handleSubmit props with form data", () => {
+    render(<ChangePasswordForm {...props} />);
+
+    const expectedFormData = {
+      old_password: "p@ssw0rd",
+      new_password: "p@ssw0rd1",
+      new_password_confirmation: "p@ssw0rd1",
+    };
+
+    // when
+    userEvent.type(
+      screen.getByLabelText("Original password"),
+      expectedFormData.old_password
+    );
+    userEvent.type(
+      screen.getByLabelText("New password"),
+      expectedFormData.new_password
+    );
+    userEvent.type(
+      screen.getByLabelText("New password confirmation"),
+      expectedFormData.new_password_confirmation
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Change password" }));
+    // then
+    expect(props.handleSubmit).toHaveBeenCalledWith(expectedFormData);
+  });
+
+  it("calls the onCancel prop when CANCEL is clicked", () => {
+    render(<ChangePasswordForm {...props} />);
+
+    // when
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    // then
+    expect(props.onCancel).toHaveBeenCalled();
   });
 });