11.27 TIL TDD(Test-Driven-Development)

지금 만들고 있는 더치페이 웹을 만들기에 앞서 우선 테스트 코드를 먼저 작성했다.

const renderComponent = () => {
  render(<CreateGroup />);

  //TODO: input component
  //인풋컴포넌트에 있는 2022 제주도 여행으로 input 설정 
  const input = screen.getByPlaceholderText("2022 제주도 여행");
 
  //TODO: save button
  const saveButton = screen.getByText("저장");
  const errorMessage = screen.queryByText("그룹 이름을 입력해 주세요");
  return {
    input,
    saveButton,
    errorMessage,
  };
};

describe("그룹 생성 페이지", () => {
  test("그룹 이름 입력 컴포넌트가 렌더링 되는가", () => {
    const { input, saveButton } = renderComponent();

    expect(input).not.toBeNull();
    //input이 비어있지 않아야하며
    expect(saveButton).not.toBeNull();
    //save버튼이 있어야한다. 
  });
  test("그룹 이름을 입력하지 않고 저장했을 시 에러메세지를 노출한다.", async () => {
    const { saveButton, errorMessage } = renderComponent();
    await userEvent.click(saveButton);
    //비동기이여만 한다. 

    expect(errorMessage).not.toBeNull();
    
  });
  test("그룹 이름을 입력 후 저장 버튼 클릭시 저장 성공", async () => {
    const { input, saveButton, errorMessage } = renderComponent();
    await userEvent.type(input, "예시 그룹명");
    await userEvent.click(saveButton);
    expect(errorMessage).toBeNull();
  });
});

test 코드를 먼저 작성하는 TDD 방식을 처음으로 진행해보았는데
기능단위로 테스트를 하기 때문에 스스로 어떤 문제가 발생하는지 인지 할 수 있어서 오류를 줄여주는 좋은 효과가 있다고 생각한다.

describe("testname",()=>{
	test("테스트할 내용",()=>{
    	expect(테스트대상).not.toBeNull()}
        
	test("테스트할 내용",()=>{
    	expect(테스트대상).not.toBeNull()}
	test("테스트할 내용",()=>{}
})