[TIL] 20240530 - bookstore 프로젝트(2)

test

---

@testing-library/react
create-react-app을 이용하여 프로젝트를 생성할 때 함께 설치

테스트 실행 명령어

npm run test

// 원하는 파일만 테스트
npm run test 파일명

test 파일

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

describe("Title Component Test", () => {
  it('렌더 확인', () => {
    // 1. 렌더
    render(
      <Title size="large">제목</Title>
    );

    // 2. 확인
    expect(screen.getByText('제목')).toBeInTheDocument();
  });
});

describe : 관련된 테스트들을 그룹화하는 함수

• 첫번째 인자 : 해당 코드 설명
• 이후 : it 을 사용하여 테스트 코드 작성

it : 하나의 테스트를 정의하는 역할

• 첫번째 인자 : 해당 테스트의 이름
• 두번째 인자 : 테스트 코드 작성

render : React 컴포넌트를 렌더링하는 함수

screen : DOM 요소에 접근하고 검증하는 데 사용되는 객체

expect : 검증을 수행하는 함수

getByText : DOM에서 특정 텍스트를 포함한 요소를 검색

forwardRef

---

forwardRef 함수는 React 컴포넌트에 ref prop을 넘겨서 그 내부에 있는 HTML 엘리먼트에 접근하게 해주는 함수

Use

import React, { ForwardedRef } from "react";

const InputText = React.forwardRef(({ placeholder, inputType, onChange, ...props }: Props, ref: ForwardedRef<HTMLInputElement>) => {
  return (
    <InputTextStyle placeholder={placeholder} ref={ref} type={inputType} onChange={onChange} {...props} />
  );
});

React Hook Form

---

react-hook-form은 uncontrolled 방식의 빠른 성능을 가지고 있는 폼 관리 라이브러리

Install

npm install react-hook-form

Use

const { 
  register, 
  handleSubmit, 
  formState: { errors }
} = useForm<SignupProps>();

register

register를 통해 특정 변수명의 객체를 생성할 수 있고, useForm() 함수를 통해 해당 input 태그의 변화를 계속 주시

handleSubmit

form이 onSubmit 되었을 때 호출하도록 하는 함수

• 첫번째 인자 : 데이터 유효성 검사에 성공하였을 때 호출되는 함수

useNavigate

---

useNavigate는 특정 이벤트가 실행되었을 때 페이지를 이동하는 경우 사용

Use

import { useNavigate } from "react-router-dom";

function Signup() {
  const navigate = useNavigate();
  
  const onSubmit = (data: SignupProps) => {
    signup(data).then((res) => {
      showAlert("회원가입이 완료되었습니다.");
      navigate("/login");
    });
  };

form을 제출하게 되면 /login 페이지로 이동

navigate(-1) : 인자가 음수이면 이전 페이지, 양수이면 다음 페이지로 이동