📍참고 https://jestjs.io/docs/using-matchers Using Matchers · Jest Jest uses "matchers" to let you test values in different ways. This document will introduce some commonly used matchers. For the full list, see the expect API doc. jestjs.io 📍Matcher 란? ✅Jest에서 값을 다양한 방법으로 테스트하기 위해 사용 - a > b, a = b, a { expect(2 + 2).toBe(4); // 값이 같..

📍참고 https://testing-library.com/docs/queries/about About Queries | Testing Library Overview testing-library.com 📍Queries ✅testing-library 에서 제공하는 API - Element를 찾을 수 있게 도와주는 역할 - DOM API의 querySelector 와 비슷하다 - 예시 // 을 모두 찾을 때 const inputs = screen.getAllByRole("textbox"); // 을 1개 찾을 때 const button = screen.getByRole("button"); ✅Query Type ✅Query Priority - getByRole : aria-role 기반으로 탐색 - getByL..

📍참고 https://create-react-app.dev/docs/running-tests Running Tests | Create React App Note: this feature is available with react-scripts@0.3.0 and higher. create-react-app.dev 📍before test.. ✅뭘 테스트 할건지 명확히 정하기 - 특정 컴포넌트의 기능.. - 유저 입력.. ✅테스트 성공, 실패 여부를 어떤 기준으로 할 건지 정하기 - 일치하는 문자열을 출력.. 📍Create React App 환경의 내장 testing 라이브러리 설치된 것들 1) @testing-library/react : ReactDOM을 사용하여 테스트할 컴포넌트를 렌더링 (React Te..

📍참고 https://jestjs.io/docs/getting-started Getting Started · Jest Install Jest using your favorite package manager: jestjs.io 📍설치 TypeScript 사용을 위해 추가 라이브러리도 함께 설치 npm i -D jest ts-jest @types/jest 이후 설정파일 만들기 - jest.config.ts 생성 import type { Config } from "jest"; const config: Config = { verbose: true, preset: "ts-jest", }; export default config; package.json 에 test script 추가 - npm test 로 실행 가..

📍Cypress 란? - JavaScript 테스팅 라이브러리 - 오픈소스 - E2E Test, Component Test 등이 가능 📍Cypress 설치 및 실행 - 참고 https://docs.cypress.io/guides/overview/why-cypress Why Cypress? | Cypress Documentation What you'll learn docs.cypress.io npm i -D cypress npx cypress open 이후 cypress Launchpad가 실행된다 공식 문서에 따르면, 뭘 골라야 할지 확실하지 않을 떄는 E2E Testing을 고르면 된다! - 언제든지 다시 변경할 수 있다 그리고 설정 창에서도 기본대로 continue를 클릭한다 그러면 브라우저를 고를 ..

📍TDD란? - Test Driven Development (TDD) : 테스트 주도 개발 - 켄트 백의 저서에서 처음 등장한 개념 - 테스트를 먼저 만들고, 테스트를 통과하기 위한 코드를 짜는 개발 방법 ⭐원하는 대로 동작하는지 빠르게 피드백을 받는 것 (더 자주, 더 빨리 피드백 받기) - 최소 기능이 동작하는 것을 확인하면 리팩토링 📍계산기 앱을 TDD로 구현하기 ✅필수 구현 기능 - 사칙연산 - 2개의 숫자를 다루는 계산기 ✅개발 과정 1. UI없이 사칙연산되는 프로그램만 만들기 - 일단 console.log 가 포함된 코드 작성 - 그 다음, 내부 로직을 완성(클래스를 구현하는 등) 2. input으로 사용자 입력 받고 이벤트 처리하기 3. 숫자 UI 추가하고 이벤트 처리하기 4. UI 레이아웃..