jest 테스트 코드 작성해보기

그룹에 멤버끼리 더치페이할 때 사용할 수 있는 웹을 만들어보는 강의를 들으며

TDD 방식으로 코드를 짜보고 있다!

TDD는 테스트 주도 개발을 뜻하고  테스트코드를 작성하며 개발하는 것을 뜻하는데

먼저 실패하는 테스트 코드를 작성한 후 그 실패한 테스트 코드를 통과, 성공시키기 위해

코드를 또 작성한다. 그 다음 리펙토링을 하면서 수정을 하는 것이 기본적인 순서인 것 같다!

 

https://zoon-bloom.tistory.com/122

TDD 테스트 주도 개발

./src/components/CreateGroup.spec.tsx

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

import userEvent from "@testing-library/user-event";

import  CreateGroup  from "./CreateGroup";

import { RecoilRoot } from "recoil";

const renderComponent = () => {

    //render 함수('렌더링할컴포넌트')

    render(

        <RecoilRoot>

            <CreateGroup/>

        </RecoilRoot>

        );

    const input = screen.getByPlaceholderText('2022 제주도 여행');

    const saveButton = screen.getByText('저장');

    const errorMessage = screen.queryByText('그룹 이름을 입력해 주세요.');

   

    //공통으로 사용될 Elemnet DOM 요소들을 renderComponent함수에서 생성

    return {

        input,

        saveButton,

        errorMessage,

    }

};

//describe : 여러 개의 테스틈 함수를 묶을 때 사용

describe('그룹 생성페이지', () => {

//test 함수 ('test할 내용의 이름' 콜백함수 실행될 테스트 코드)

    test('그룹 이름 입력 컴포넌트가 렌더링 되는가', () => {

        const {input, saveButton} = renderComponent();//CreateGroup이 렌더링된다.

        //todo : input component

        //특정 placeholder텍스트를 가진 요소를 찾아서 존재 여부 확인

        //getBy DOM에서 하나만 가져온다

        // const input = screen.getByPlaceholderText('2022 제주도 여행');

        expect(input).not.toBe(null);

        //expect 특정 값을 검사하는 함수

        //에러처리를 하는 구문 input에 값은 null값이 아니여야한다!

        //todo: save button

        // const saveButton = screen.getByText('저장');

        expect(saveButton).not.toBeNull();

    });

    //에러 메시지를 노출

    test('그룹 이름을 입력하지 않고  "저장" 버튼을 클릭시, 에러 메시지를 노출한다.', () => {

        const {saveButton, errorMessage} = renderComponent()

        // const saveButton = screen.getByText('저장');

        //userEvent.click('클릭 이벤트가 발생되는 Element') 유저가 클릭이벤트를 발생시킨 것 처럼 동작

        userEvent.click(saveButton);

        // const errorMessage = screen.queryByText('그룹 이름을 입력해 주세요.');

        expect(errorMessage).toHaveAttribute('data-validate', 'false');

    });

    test('그룹 이름을 입력후, "저장" 버튼을 클릭시, 저장 성공',async  () => {

        const {input, saveButton, errorMessage} = renderComponent();

        //userEvent를 사용해 유저가 input에 텍스를 입력하는 mock을 생성

        //해당 type함수가 다 완료가 된후 click이벤트가 발생해야하므로 비동기로 동작

        await userEvent.type(input, '예시 그룹명');

        await userEvent.click(saveButton);

        expect(errorMessage).toHaveAttribute('data-validate', 'true'); //저장 성공이라면 null값이 나와야함!

    });

})

다음과 같이 테스트 코드를 작성한 파일이다. 파일이름은 실제 컴포넌트의 이름에서 spec을 붙여서 작성한다

요구 사항에 맞게 테스트 코드를 순서대로 작성 후에 실제 컴포넌트를 작성하는 것이다

일단 실제 컴포넌트 작성 전이기 때문에 무조건 실패가 나올 수밖에 없고 실제 컴포넌트의 코드를 작성해
나가며 테스트를 통과시키는 것이 TDD 방식의 기본인 듯하다. 

확실히 TDD 개발 방식으로 코드를 작성하다보니 지금 작성하는 기능에 대해 집중적으로 생각하게 되고 
요구사항과 관련없는 코드는 신경 쓰지 않게 되는 장점이 있다.

단점이라면 실제 개발하는 코드만큼 테스트 코드도 시간이 오래 걸리고 파일 코드에서 보이는 

to메서드 등 jest에서 제공하는 기능들도 찾아봐야 해서 많이 힘들다는 단점? 이 있다..

설정하고 추가적인 라이브러리 확인등등..시간을 엄청나게 잡아먹음. jest-dom , typescript는 부가 추가 설정

https://zoon-bloom.tistory.com/123

jest 사용 도중 오류

그래도 앞으로는 TDD 방식으로 계속 작성해볼 예정이다. 생각보다 재미도 있고 현업에서는
테스트 코드를 중요시 여기는 곳이 많다고 들어서  천천히 적응해 나가야겠다.