I am new to jest js, and I have created the simple login page in nextJS, In order to test that page I wrote the simple unit test code for that component, in my scenario, I want to test my span tag class name depending on whether the user entered the input fields or not, when the user submits the button.

In order to do that I created the test file and I have check the class name when the user submit the button without entering the input value and I checked vice versa. In my scenario, the one condition is passed which is when the user submits the button without entering the input value. However, when the user submits the button with the input value now my test case has failed.

LoginComponent.tsx

<button type="submit" name="Login" data-testid="login" className={`submit_btn`}>
  <span className={isLoader ? "mr-3" : ""} id="login-text">
    Login
  </span>
  {isLoader && <Loader />}
</button>;

Login.test.tsx

const mockValue = "Test@123";

describe("Login Component", () => {
  const setup = () => {
    const { container } = render(<Login />);
    const loginButton = screen.getByRole("button", { name: "Login" });
    const email: any = container.querySelector("input[name='email']");

    return {
      email,
      container,
      loginButton,
    };
  };

  describe("Should render Login button", () => {
    it("Should render submit Loader", async () => {
      const { loginButton, email } = setup();
      expect(email.value).toBe("");
      await act(async () => {
        fireEvent.submit(loginButton);
      });
      expect(document.getElementById("login-text")).not.toHaveClass("mr-3");
      fireEvent.input(email, {
        target: {
          value: mockValue,
        },
      });
      await act(async () => {
        fireEvent.submit(loginButton);
      });
      expect(document.getElementById("login-text")).toHaveClass("mr-3")
      render(<Loader />);
      expect(email.value).toEqual(mockValue);
    });
  });
});