diff --git a/test/components/views/dialogs/InteractiveAuthDialog-test.tsx b/test/components/views/dialogs/InteractiveAuthDialog-test.tsx
index ff154a88f2..3ce6ca89ca 100644
--- a/test/components/views/dialogs/InteractiveAuthDialog-test.tsx
+++ b/test/components/views/dialogs/InteractiveAuthDialog-test.tsx
@@ -16,9 +16,8 @@ limitations under the License.
*/
import React from "react";
-import { act } from "react-dom/test-utils";
-// eslint-disable-next-line deprecate/import
-import { mount, ReactWrapper } from "enzyme";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import InteractiveAuthDialog from "../../../../src/components/views/dialogs/InteractiveAuthDialog";
import { flushPromises, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";
@@ -33,7 +32,10 @@ describe("InteractiveAuthDialog", function () {
makeRequest: jest.fn().mockResolvedValue(undefined),
onFinished: jest.fn(),
};
- const getComponent = (props = {}) => mount();
+
+ const renderComponent = (props = {}) => render();
+ const getPasswordField = () => screen.getByLabelText("Password");
+ const getSubmitButton = () => screen.getByRole("button", { name: "Continue" });
beforeEach(function () {
jest.clearAllMocks();
@@ -44,8 +46,6 @@ describe("InteractiveAuthDialog", function () {
unmockClientPeg();
});
- const getSubmitButton = (wrapper: ReactWrapper) => wrapper.find('[type="submit"]').at(0);
-
it("Should successfully complete a password flow", async () => {
const onFinished = jest.fn();
const makeRequest = jest.fn().mockResolvedValue({ a: 1 });
@@ -56,31 +56,24 @@ describe("InteractiveAuthDialog", function () {
flows: [{ stages: ["m.login.password"] }],
};
- const wrapper = getComponent({ makeRequest, onFinished, authData });
+ renderComponent({ makeRequest, onFinished, authData });
- const passwordNode = wrapper.find('input[type="password"]').at(0);
- const submitNode = getSubmitButton(wrapper);
+ const passwordField = getPasswordField();
+ const submitButton = getSubmitButton();
- const formNode = wrapper.find("form").at(0);
- expect(passwordNode).toBeTruthy();
- expect(submitNode).toBeTruthy();
+ expect(passwordField).toBeTruthy();
+ expect(submitButton).toBeTruthy();
// submit should be disabled
- expect(submitNode.props().disabled).toBe(true);
+ expect(submitButton).toBeDisabled();
// put something in the password box
- act(() => {
- passwordNode.simulate("change", { target: { value: "s3kr3t" } });
- wrapper.setProps({});
- });
+ await userEvent.type(passwordField, "s3kr3t");
- expect(wrapper.find('input[type="password"]').at(0).props().value).toEqual("s3kr3t");
- expect(getSubmitButton(wrapper).props().disabled).toBe(false);
+ expect(submitButton).not.toBeDisabled();
// hit enter; that should trigger a request
- act(() => {
- formNode.simulate("submit");
- });
+ await userEvent.click(submitButton);
// wait for auth request to resolve
await flushPromises();