[React] TDD개발로 로그인 폼 테스트하기(1)

1. 요소들이 컴포넌트에 렌더링 되었는지 확인

먼저 src/components/login/Login.jsx 로그인 컴포넌트를 만들고 src/components/Login.test.js 테스트 파일 만들기

(스타일은 미리 적용해놓은 상태)

 

// Login.jsx 
import React from "react";

const Login = () => {
  return (
    <div className="login">
      <form className="container">
        <input type="text" placeholder="이메일" />
        <input type="password" placeholder="비밀번호" />
        <button type="submit">로그인</button>
      </form>
    </div>
  );
};

export default Login;

 

// Login.test.js

import { render, screen } from "@testing-library/react";
import Login from "./login/Login";

test("email input should be rendered", () => {
  render(<Login />);
  const emailInputEl = screen.getByPlaceholderText("이메일");
  expect(emailInputEl).toBeInTheDocument();
});

test("password input should be rendered", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText("비밀번호");
  expect(passwordInputEl).toBeInTheDocument();
});

test("button should be rendered", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  expect(buttonEl).toBeInTheDocument();
});

 

로그인 컴포넌트를 DOM에 렌더링 후 이메일, 비밀번호 input 요소와 button요소가 렌더링 되었는지 확인하는 테스트 코드.

getByPlaceholderText는 placeholder 속성에 "이메일", "비밀번호" 라는 값을 가지고 있는지 찾기

getByRole은 "button" 역할을 하는 요소 찾기

 

그렇기 때문에 로그인 컴포넌트에 아무 요소가 없으면 실패, input과 button을 넣으면 아래처럼 성공하는 걸 볼 수 있다.

 

2. 입력란 비어있는지 확인

이번엔 input이 비어있는지 테스트하기 위해 아래처럼 코드를 작성

임의로 input에 value값을 넣었는데 실패하는 걸 알 수 있다.

test("email input should be empty", () => {
  render(<Login />);
  const emailInputEl = screen.getByPlaceholderText("이메일");
  expect(emailInputEl.value).toBe("");
});

test("password input should be empty", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText("이메일");
  expect(passwordInputEl.value).toBe("");
});

 

<input type="text" placeholder="이메일" value="email@test.com" />
<input type="password" placeholder="비밀번호" value="password" />

 

 

3. 로그인 버튼 클릭 시 입력란이 비어있지 않은지 확인

실제 로그인 버튼을 누르면 API요청이 필요하지만 테스트이기 때문에 버튼을 비활성화 하는것으로 대체

 

버튼이 비활성화 상태인지 확인하는 테스트

test("button should be disabled", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  expect(buttonEl).toBeDisabled();
});

<button disabled="true" type="submit">

 

 

4. 에러 메세지 확인

입력란이 빈칸일 때 로그인 버튼을 누르면 에러메시지를 띄우려고 하는데 처음 로그인 페이지에 들어왔을 땐 보여지면 안되기 때문에

에러메세지가 없는지 확인하는 테스트

test("error message should not be visible", () => {
  render(<Login />);
  const errorEl = screen.getByTestId("error");
  expect(errorEl).not.toBeVisible();
});

toBeVisible 매처는 요소가 보이는 걸 통과시키지만 not을 사용해서 요소가 보이지 않을 때 통과시킨다.

 

import React, { useState } from "react";

const Login = () => {
  const [error, setError] = useState(false);
  return (
    <div className="login">
      <form className="container">
        <input type="text" placeholder="이메일" />
        <input type="password" placeholder="비밀번호" />
        <span
          data-testid="error"
          style={{ visibility: error ? "visible" : "hidden" }}
        >
          이메일을 입력하세요.
        </span>
        <button type="submit">로그인</button>
      </form>
    </div>
  );
};

export default Login;

data-testid(CamelCase 작성 X)는 HTML 요소에 직접 추가하는 속성으로 만약 에러가 발생하면 에러메세지를 보여주고, 아니면 보여주지 않도록 설정했다.

그렇기 때문에 저 스타일 속성이 없다면 테스트는 실패

 

5. 이벤트 테스트

이메일, 비밀번호가 맞는지 확인하는 테스트

사용자가 필드에 값을 입력하면 상태에 반영시키기

import React, { useState } from "react";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  return (
    <div className="login">
      <form className="container">
        <input
          type="text"
          placeholder="이메일"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="비밀번호"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </form>
    </div>
  );
};

export default Login;

 

test("email input should be change", () => {
  render(<Login />);
  const emailInputEl = screen.getByPlaceholderText("이메일");
  const testValue = "test";

  fireEvent.change(emailInputEl, { target: { value: testValue } });
  expect(emailInputEl.value).toBe(testValue);
});

test("password input should be change", () => {
  render(<Login />);
  const passwordInputEl = screen.getByPlaceholderText("비밀번호");
  const testValue = "test";

  fireEvent.change(passwordInputEl, { target: { value: testValue } });
  expect(passwordInputEl.value).toBe(testValue);
});

 

fireEvent는 주요 DOM 이벤트를 시뮬레이션 할 수 있어서 사용자가 특정 액션을 수행했을 때 컴포넌트가 예상한대로 동작하는지 확인할 수 있다.

사용자가 필드에 "test"라는 값을 입력했다고 가정하고, fireEvent.change를 사용해서 이메일, 비밀번호 값이 "test"와 같은지 확인

 

하지만 아까 위에서 버튼을 비활성화 시켜놨기 때문에 입력값이 없을때만 비활성화하는 걸로 코드 수정하기

<button disabled={!email || !password} type="submit">로그인</button>

 

test("button should not be disabled when inputs exist", () => {
  render(<Login />);
  const buttonEl = screen.getByRole("button");
  const emailInputEl = screen.getByPlaceholderText("이메일");
  const passwordInputEl = screen.getByPlaceholderText("비밀번호");
  const testValue = "test";

  fireEvent.change(emailInputEl, { target: { value: testValue } });
  fireEvent.change(passwordInputEl, { target: { value: testValue } });
  expect(buttonEl).not.toBeDisabled();
});