jest + React Testing Libraryでテストを行なってみよう！

import { render,screen, waitFor } from "@testing-library/react"
// loginコンポーネントimport
import Login, { validateEmail } from "../Login"
import userEvent from "@testing-library/user-event";

describe("ログインコンポーネントをテストします", () => {
 test("ボタンが1つあるかどうか", async () => {
 // loginコンポーネントをレンダリング
 render(<Login />);
 // findAllByRole関数で何の要素をテストするのか指定
 const buttonList = await screen.findAllByRole('button');
 // toHaveLengthで数をテストする
 expect(buttonList).toHaveLength(1);
 });
});

import React, { useState } from "react";
import { Form, Button, Alert } from "react-bootstrap";


const Login = () => {
const [email, setEmail] = useState("");
const [error, setError] = useState("");
const [showUser, setShowUser] = useState(false);


const handleSubmit = (e) => {
setShowUser(false);
e.preventDefault();
if (validateEmail(email)) {
setShowUser(true);
setError("");
return;
}
setError("メールアドレスが有効ではありません");
};


return (
<>
<Form onSubmit={handleSubmit} noValidate>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>メールアドレス</Form.Label>
<Form.Control
type="email"
placeholder="メールアドレス入力"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</Form.Group>


{showUser && (
<Alert data-testid="user" variant="success">
{email}
</Alert>
)}
{error && (
<Alert data-testid="error" variant="danger">
{error}
</Alert>
)}


<Button data-testid="submit" variant="primary" type="submit">
送信
</Button>
</Form>
</>
);
};


export const validateEmail = (email) => {
const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
if (regex.test(email)) {
return true;
}
return false;
};


export default Login;

import { render,screen, waitFor } from "@testing-library/react"
import Login, { validateEmail } from "../Login"
import userEvent from "@testing-library/user-event";


describe("ログインコンポーネントをテストします", () => {
 test("ボタンが1つあるかどうか", async () => {
  render(<Login />);
  // findAllByRole関数で何の要素をテストするのか指定
  const buttonList = await screen.findAllByRole('button');
  // console.log(buttonList);

  // toHaveLengthで数をテストする
  expect(buttonList).toHaveLength(1);
 });

 test("メールアドレスのバリデーションが失敗すること", () => {
  const testEmail = "masa.com";
  expect(validateEmail(testEmail)).not.toBe(true);
 });

 test("メールアドレスのバリデーションが成功すること", () => {
  const testEmail = "oishi@gmail.com";
  expect(validateEmail(testEmail)).toBe(true);
 });

 test("メールアドレスを送信できるのかどうか", async () => {
  render(<Login />);
  const submitButton = screen.getByTestId("submit");
  console.log(submitButton);
  const email = screen.getByPlaceholderText("メールアドレス入力");

  // emailにoishi@gmail.comを入力
  userEvent.type(email, "oishi@gmail.com");
  userEvent.click(submitButton);

  await waitFor(() => {
   const userInfo = screen.getByText("oishi@gmail.com");
   expect(userInfo).toBeInTheDocument();
  });
 });
});