From f98ccf468c0ea2d7f3c06383784790e4891c52cb Mon Sep 17 00:00:00 2001 From: Ilia Mashkov Date: Thu, 2 Apr 2026 12:47:22 +0300 Subject: [PATCH] test(auth): wrap component rendering in act() --- .../auth/ui/LoginForm/LoginForm.spec.tsx | 18 ++++++++++-------- .../auth/ui/RegisterForm/RegisterForm.spec.tsx | 18 +++++++++--------- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/features/auth/ui/LoginForm/LoginForm.spec.tsx b/src/features/auth/ui/LoginForm/LoginForm.spec.tsx index 8cbfa93..dc9e7bc 100644 --- a/src/features/auth/ui/LoginForm/LoginForm.spec.tsx +++ b/src/features/auth/ui/LoginForm/LoginForm.spec.tsx @@ -1,24 +1,26 @@ import { selectAuthData, useAuthStore } from "../../model"; -import { render, screen } from "@testing-library/react"; +import { act, render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { LoginForm } from "./LoginForm"; import { MOCK_EMAIL, MOCK_PASSWORD } from "../../api"; +import { useTokenStore } from "shared/api"; describe("LoginForm", () => { afterEach(() => { useAuthStore.getState().reset(); + useTokenStore.getState().reset(); vi.restoreAllMocks(); }); it("should render form", () => { - render(); + act(() => render()); const form = screen.getByRole("form"); expect(form).toBeInTheDocument(); }); it("disables submit button when form is invalid", () => { - render(); + act(() => render()); const loginButton = screen.getByRole("button", { name: /login/i }); expect(loginButton).toBeDisabled(); @@ -27,7 +29,7 @@ describe("LoginForm", () => { it("disables submit button when auth store status equals loading", async () => { useAuthStore.setState({ status: "loading" }); - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); const passwordInput = screen.getByLabelText(/password/i); @@ -41,7 +43,7 @@ describe("LoginForm", () => { it("enables submit button when form is valid and auth store status isn't equal to loading", async () => { useAuthStore.setState({ status: "idle" }); - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); const passwordInput = screen.getByLabelText(/password/i); @@ -53,7 +55,7 @@ describe("LoginForm", () => { }); it("updates email value in auth store when user types", async () => { - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); await userEvent.type(emailInput, MOCK_EMAIL); @@ -62,7 +64,7 @@ describe("LoginForm", () => { }); it("updates password value in auth store when user types", async () => { - render(); + act(() => render()); const passwordInput = screen.getByLabelText(/password/i); await userEvent.type(passwordInput, MOCK_PASSWORD); @@ -74,7 +76,7 @@ describe("LoginForm", () => { const loginSpy = vi.spyOn(useAuthStore.getState(), "login"); useAuthStore.setState({ status: "idle" }); - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); const passwordInput = screen.getByLabelText(/password/i); diff --git a/src/features/auth/ui/RegisterForm/RegisterForm.spec.tsx b/src/features/auth/ui/RegisterForm/RegisterForm.spec.tsx index 367301f..8e814af 100644 --- a/src/features/auth/ui/RegisterForm/RegisterForm.spec.tsx +++ b/src/features/auth/ui/RegisterForm/RegisterForm.spec.tsx @@ -1,4 +1,4 @@ -import { render, screen } from "@testing-library/react"; +import { act, render, screen } from "@testing-library/react"; import { RegisterForm } from "./RegisterForm"; import { selectAuthData, useAuthStore } from "../../model"; import { MOCK_NEW_EMAIL, MOCK_PASSWORD } from "../../api"; @@ -11,14 +11,14 @@ describe("RegisterForm", () => { }); it("should render form", () => { - render(); + act(() => render()); const form = screen.getByRole("form"); expect(form).toBeInTheDocument(); }); it("should disable button when form is invalid", async () => { - render(); + act(() => render()); const registerButton = screen.getByRole("button", { name: /register/i }); @@ -28,7 +28,7 @@ describe("RegisterForm", () => { it("should disable button when auth store status equals loading", async () => { useAuthStore.setState({ status: "loading" }); - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); const passwordInput = screen.getByLabelText(/password/i); @@ -43,7 +43,7 @@ describe("RegisterForm", () => { }); it("should disable button when password and confirm password do not match", async () => { - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); const passwordInput = screen.getByLabelText(/password/i); @@ -60,7 +60,7 @@ describe("RegisterForm", () => { it("should enable button when password and confirm password match and auth store status isn't equal to loading", async () => { useAuthStore.setState({ status: "idle" }); - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); const passwordInput = screen.getByLabelText(/password/i); @@ -75,7 +75,7 @@ describe("RegisterForm", () => { }); it("should change email value in auth store when user types", async () => { - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); await userEvent.type(emailInput, MOCK_NEW_EMAIL); @@ -85,7 +85,7 @@ describe("RegisterForm", () => { }); it("should change password value in auth store when user types", async () => { - render(); + act(() => render()); const passwordInput = screen.getByLabelText(/password/i); await userEvent.type(passwordInput, MOCK_PASSWORD); @@ -98,7 +98,7 @@ describe("RegisterForm", () => { const registerSpy = vi.spyOn(useAuthStore.getState(), "register"); useAuthStore.setState({ status: "idle" }); - render(); + act(() => render()); const emailInput = screen.getByRole("textbox", { name: /email/i }); const passwordInput = screen.getByLabelText(/password/i);