테스트 코드를 공부하면서 개발한 코드에 적용해보았다. 처음이라 그런지 많이 어렵기도 한데 공부도 되고 있다.
이 글은 공부용으로 개념 정리 글이 아니고 사용하면서 느낌을 정리한 글이므로 개념정리는 다른 분의 블로그를 방문하여 주시기 바랍니다. 뭐 간단하게 정리하기도 하면서 느낌까지 있는 회고 같은 글입니다.
TDD 개발 이란 말을 한때 많이 사용한다고 들었긴하였는데 막상 개발을 하게 되면 급하게 일을 처리해야 해서
TDD개발을 진행하지 못하였다.
TDD란 ?
테스트 주도 개발(Test-Driven Development) 개발로 테스트 코드를 먼저 짜고 그다음에 개발을 진행하는 것이다.
환경 셋업은 검색해보면 많이 나오니 자세하게 참고 해보시길 바란다.
간단하게 정리한다.
환경 셋업
npm i -D @testing-library/react @testing-library/jest-dom
"@testing-library/jest-dom": "^6.4.7",
"@testing-library/react": "^16.0.0",
"@types/jest": "^29.5.12",
"@types/node": "^20",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"ts-node": "^10.9.2",
이렇게 세팅했다.
그리고 루트 폴더에
jest.config.ts 와 jest.setup.ts를 작성해준다.
config로 경로 세팅 을 해주자 .
test 코드 작성
블로그를 참고 해서 짰는데 tsx로 테스트 파일을 만들어 줘야 한다. 아니면 에러남..
파일명.test.tsx 이렇게 만들어서 짰다.
처음 시작은 describe 로 테스트를 시작한다.
react-testing-library를 사용하였는데 매번 테스트 마다 render함수를 사용하는게 힘들었는데
beforeEach 셋업을 통해서 반복되는 코드를줄일수 있었다.
recoil, useRouter등 세팅해야 할게 많다.
간단하게 코드는 이렇게 짰다.
// Mock useRouter:
jest.mock("next/navigation", () => ({
useRouter() {
return {
prefetch: () => null,
};
},
}));
const mockLoginRecoil = {
token: "",
nickname: "",
email: "",
referral: "",
userRole: "",
};
describe("Login Rendering test ", () => {
const TIMESTAMP = Date.now();
let utils: any;
beforeEach(() => {
utils = render(
<RecoilRoot>
<Suspense fallback={<div>loading...</div>}>
<Login />
</Suspense>
</RecoilRoot>
);
});
render로 컨테이너로 스냅샷을 만들고 그 스냅샷에서 내가 테스트 할 코드 등이 있는지 확인해서 테스트를 진행하는 것이었다.
container 에서 byText, Lable, Placeholder등 여러개의 태그들을 선택하여 그 태그가 있는지 없는지.
판단해서 테스트를 한다.
쿼리가 다양하게 많은데
get / query/ find 등이 있다.
이게 아직 헷갈리는게 get 은 없으면 에러가 발생하고 query는 없어도 에러가 발생하지 않는다.
find조건은 나타날때까지 기다려주는데 4500ms 까지 기다려주고 없으면 에러가 나온다.
로그인 조건으로 아래 에러 문구가 나타나는지 안나타나는지 판단을 위해서 코드를 짰는데
query로 조건을 짜면 바로 판단을 하는것이고 find는 async/await 를 사용 하는 로직을 짜줘야 하는 것이다.
예)
처음에는 에러문구가 없을 것이기 때문에
query 조건으로 에러문구를 즉시 찾아준다.
그다음 에러가 되는 문구를 넣으면 에러 문구가 나와야 하기 때문에
find 조건을 넣어주는데 async/await를 포함해서 넣어준다.
성공하는 테스트
여기서는 에러문구가 없을 것이므로 query조건으로 찾아주었다.
이런 판단까지 해서 함수를 써야 하는데 아직까지는 익숙하지 않아서 어렵지만 재미있다.
fireEvent
fireEvent 로 이벤트를 관리한다. input이라면 fireEvent.change() , 클릭이라면 fireEvent.click 등 이렇게 사용하면된다
함수라서 파라미터로 2개의 값을 받는데 적용할 대상, 적용할 기능 을 넣는다. 클릭이벤트는 대상만 넣는다.
예)
fireEvent.click(plusButton);
fireEvent.change(myInput, { target: { value: 'hello world' } });
테스트 코드를 처음 공부하는 것인데 계속 쓰면서 반복숙달하면 테스트 코드도 잘짤수 있을것이라 생각이 든다.
테스트 코드 짜는게 귀찮기는 하지만 직접 테스트 하는 것보다 자동화로 테스트를 진행할수 있어서 더 편리하다고 한다.
하지만 눈으로 직접 변화해 가는것을 보면서 테스트 하는게 더 재밌기도 하다.
지금은 완성된 코드 내에서 jest를 얹는 형식으로 개발하고 있지만
추후에는 TDD 방식으로 개발도 진행해 봐야 겠다.
