test(auth): wrap component rendering in act()

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(<LoginForm />);
+    act(() => render(<LoginForm />));
     const form = screen.getByRole("form");
 
     expect(form).toBeInTheDocument();
   });
 
   it("disables submit button when form is invalid", () => {
-    render(<LoginForm />);
+    act(() => render(<LoginForm />));
     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(<LoginForm />);
+    act(() => render(<LoginForm />));
 
     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(<LoginForm />);
+    act(() => render(<LoginForm />));
 
     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(<LoginForm />);
+    act(() => render(<LoginForm />));
     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(<LoginForm />);
+    act(() => render(<LoginForm />));
     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(<LoginForm />);
+    act(() => render(<LoginForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);

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(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     const form = screen.getByRole("form");
     expect(form).toBeInTheDocument();
   });
 
   it("should disable button when form is invalid", async () => {
-    render(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     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(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     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(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     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(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     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(<RegisterForm />);
+    act(() => render(<RegisterForm />));
     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(<RegisterForm />);
+    act(() => render(<RegisterForm />));
     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(<RegisterForm />);
+    act(() => render(<RegisterForm />));
 
     const emailInput = screen.getByRole("textbox", { name: /email/i });
     const passwordInput = screen.getByLabelText(/password/i);