jest 2

프론트엔드 테스트 - (5) toBe() vs toEqual() vs toBeTruthy()

test("if checkbox is not checekd, submit button disabled", async () => { render(); const checkBoxElement = screen.getByRole("checkbox", { name: /checkbox/i, }); const submitButtonElement = screen.getByRole("button", { name: /submit/i, }); expect(checkBoxElement.checked).toEqual(false); expect(submitButtonElement.disabled).toBeTruthy(); }); 위의 예시로 보자면, toEqual( )과 toBeTruthy( )를 구분해서 사용한 이유는 각 ma..

Frontend/React 2024.03.26

프론트엔드 테스트 - (1) 프롤로그, Jest 사용 방법

프론트엔드에서의 테스트란 (with React) 1. 테스트 목적 💡프로그래밍에서의 테스트란 프로그램을 실행해서 오류, 버그를 검출하고 어플리케이션이 정상적으로 작동하는지 검증하는 과정이다. 그렇다면, 왜 테스트를 하는걸까? 테스트를 하는 이유에 대해서 간략히 정리해보자면, 다음과 같다. 어플리케이션을 안정적으로 만들기 위해, 버그를 빨리 찾아내서 고치기 위해 디버깅 시간 단축 - 자동화 된 유닛테스트로 특정 버그를 빨리 캐치할 수 있다. 신규 기능 추가시 설계 시간 단축 신규 기능 추가시 발생하는 변경 사항들로 인한 결함을 찾아낼 수 있다. 기존 기능을 리팩토링시 테스트를 실행하여 기능 상 결함이 없음을 보장할 수 있다. 코드에 확신이 생긴다. 컴포넌트가 제대로 작동한다는 것을 테스트 케이스를 통해 보..

Frontend/React 2024.03.20