개발 일지

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..

간단한 예제를 통해, React Testing Library를 실습해보고자 한다. 먼저 실습에 앞서, TDD 개념에 대해 짚고 가보자. TDD란 Test Driven Development의 약자로, 한국어로는 테스트 주도 개발이라고 명칭한다. 테스트 주도 개발이란 실제 코드를 작성하기 전에 테스트 코드를 먼저 작성하는 것을 의미한다. 즉, 기능 개발에 앞서 테스트 코드를 작성하고 이 테스트 코드를 바탕으로 기능 구현 후, 이를 검증하는 방식이다. TDD는 크게 3가지 단계로 나눌 수 있다. Red : 코드를 작성하기 전에 테스트 코드 작성 단계. 코드를 작성하기 전이므로 당연히 테스트는 실패할 것이다. Green : 테스트를 통과 시키기 위해 코드를 작성하는 단계. Refactor : 코드를 리팩토링 하..

React Testing Library 1. 개요 - Facebook에서 만든 오픈소스 테스팅 프레임워크 - Javascript와 Typescript 를 지원한다. - React, Vue, Angular 등의 프레임워크에서 지원한다. - 참고) CRA 설치시 기본으로 RTL이 세팅되어 있다. 2. 사용 방법 1) CRA에서 테스트 코드 확인해보기 Create-React-App을 이용해서 프로젝트를 설정하면, 구성 폴더에서 App.test.tsx를 확인해볼 수 있다. 예시: [비교 1] import React from "react"; import { render, screen } from "@testing-library/react"; import App from "./App"; test("renders l..

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