Example of unit tests for a Login form built with Chakra UI

Login.js

const displayErrors = (isEmailError, isPasswordError) => {
  if (isEmailError) {
    return (
      <FormErrorMessage data-testid={testids.login.error.email}>
        Email is required.
      </FormErrorMessage>
    );
  }
  if (isPasswordError) {
    return (
      <FormErrorMessage data-testid={testids.login.error.password}>
        Password must be at least 8 characters.
      </FormErrorMessage>
    );
  }
};

const handleClick = (
  e,
  isEmailError,
  isPasswordError
) => {
  if (isEmailError || isPasswordError) {
    e.preventDefault();
  } else {
    console.log(template.login.success);
  }
};

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleEmailChange = (e) =>
    setEmail(e.currentTarget.value);
  const handlePasswordChange = (e) =>
    setPassword(e.currentTarget.value);

  const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  const isEmailError = !emailRegex.test(email);
  const isPasswordError = password.length < 8;

  return (
    <div className={styles["login"]} data-testid="login-form">
      <p className={styles["heading"]} data-testid="login-heading">
        Login
      </p>
      <Box
        width="100%"
        p={8}
        borderWidth="1px"
        borderRadius="lg"
        overflow="hidden"
      >
        <FormControl isInvalid={isEmailError || isPasswordError}>
          <VStack spacing={4} align="stretch">
            <FormLabel>Email</FormLabel>
            <Input
              type="email"
              value={email}
              onChange={handleEmailChange}
              data-testid="login-email"
            />
            <FormLabel>Password</FormLabel>
            <Input
              type="password"
              value={password}
              onChange={handlePasswordChange}
              data-testid="login-password"
            />
            <Button
              mt={4}
              colorScheme="teal"
              type="submit"
              onClick={(e) => handleClick(e, isEmailError, isPasswordError)}
              data-testid="login-submit"
            >
              Log in
            </Button>
            {displayErrors(isEmailError, isPasswordError)}
          </VStack>
        </FormControl>
      </Box>
    </div>
  );
};

Login.test.js

describe("Login", () => {
  let emailInput;
  let passwordInput;
  let submitButton;
  let emailErrorMessage;
  let passwordErrorMessage;

  it("email and password are valid", () => {
    render(<Login />);

    emailInput = screen.getByTestId("login-email");
    passwordInput = screen.getByTestId("login-password");
    submitButton = screen.getByTestId("login-submit");
    fireEvent.change(emailInput, { target: { value: "[email protected]" } });
    fireEvent.change(passwordInput, { target: { value: "password" } });
    fireEvent.click(submitButton);

    expect(consoleMock).toBeCalledTimes(1);
    expect(consoleMock).toBeCalledWith("Logged in successfully");
  });

  it("email is invalid", () => {
    render(<Login />);

    emailInput = screen.getByTestId("login-email");
    passwordInput = screen.getByTestId("login-password");
    submitButton = screen.getByTestId("login-submit");
    fireEvent.change(emailInput, { target: { value: "abc" } });
    fireEvent.change(passwordInput, { target: { value: "password" } });
    fireEvent.click(submitButton);

    expect(consoleMock).not.toBeCalled();
    expect(emailErrorMessage).not.toBeNull();
  });

  it("password is invalid", () => {
    render(<Login />);

    emailInput = screen.getByTestId("login-email");
    passwordInput = screen.getByTestId("login-password");
    submitButton = screen.getByTestId("login-submit");
    fireEvent.change(emailInput, { target: { value: "[email protected]" } });
    fireEvent.change(passwordInput, { target: { value: "passwor" } });
    fireEvent.click(submitButton);

    expect(passwordErrorMessage).not.toBeNull();
  });
});