개발 일지

이번에는 이전 포스팅에서 다뤘던 쿼리 함수들의 우선 순위와 userEvent 에 대해서 더 자세히 알아본다. 쿼리 함수 우선 순위 먼저, 쿼리 함수란 간단하게 요약하자면, 우리가 테스트를 할 때 요소를 직접적으로 가져오기 위한 수단 정도로 이해하면 쉽다. 타입은 세 가지 종류가 있었는데, [get, query, find] 세가지 종류가 있다. 세 가지 종류의 타입에 대해서는 이전 포스팅에서 자세히 확인해 볼 수 있다. 이 쿼리 함수에도 공식 문서에서 권고하는 우선 순위가 있는데, 이에 대해서 다뤄보려고 한다. 일반적으로 테스트 코드는 사용자의 인터렉션 방식과 최대한 유사해야 한다. 1. Queries Accessible to Everyone. :모든 사용자가 쿼리에 접근할 수 있어야 한다. 일반적으로 웹..

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