【한글자막】 Jest 및 테스팅 라이브러리로 React 테스트하기

Jest와 React 테스팅 라이브러리로 앱에 대한 기능 테스트, 구현 대신 동작을 테스트하는 방법, 한 번에 하나의 파일을 실행하거나 테스트하는 것을 포함한 Jest Watch 모드를 최대한 활용하는 법을 배우세요

4.88 (13 reviews)
Udemy
platform
한국어
language
Software Testing
category
instructor
179
students
8 hours
content
May 2022
last update
$84.99
regular price

What you will learn

React 테스팅 라이브러리로 간단하고 복잡한 React 애플리케이션 테스트

React 테스팅의 모범 사례: 구현 대신 동작을 테스트하는 방법

한 번에 하나의 파일을 실행하거나 테스트하는 것을 포함한 Jest Watch 모드를 최대한 활용

테스팅 라이브러리에서 반환되는 일반적인 에러와 수정 방법

Description

React 테스팅 라이브러리는 React를 테스트하는 매우 대중적인 옵션이 되었습니다! 본 강의는 React 앱 테스트 전반에 대해 상세히 다뤄 탄탄한 기초를 제공합니다.


모범 사례 (Best Practices)

React 테스팅 라이브러리 강의는 앱을 테스트하는 모범 사례를 장려하기 위해 설계되었습니다. 본 강의에서 다음과 같은 부분을 학습하시게 됩니다:

  • 구현보다는 동작을 테스트하기

  • 사용자 측면의 앱과 상호작용 테스트하기

  • 코드에 가능한 한 접근할 수 있도록 접근성 핸들로 요소 찾기


광범위한 테스트 예제

강의에서 제가 설명시 사용할 앱은 매우 간단한 (버튼 클릭으로 색상을 변경하는) 예제로 시작하여 다음과 같이 점점 더 복잡한 테스트 개념으로 발전합니다:

  • 비동기식 페이지 변경 테스트하기

  • Mock Service Worker를 사용하여 서버에서 데이터 시뮬레이션하기

  • 렌더링 시, 컴포넌트에 콘텍스트 제공자 적용하기

이 강의는 여러분들의 학습을 아낌없이 지원하고 여러분이 성공할 수 있도록 설계되었습니다. 복잡한 개념을 점진적으로 성장시켜드리도록 하겠습니다.


새로운 기술 연습

학습 내용을 연습할 수 있는 기회도 많이 드립니다. 이 강의는 강의 프로젝트를 구축하는 동안 "코드 퀴즈"를 제공합니다. 배운 내용을 적용해 보고 영상에서 해답을 확인할 수 있습니다. (선택 사항인) 마지막 섹션에서는 두 번째 앱을 완료하고 강의에서 배운 개념을 다지기 위한 더 많은 예제를 제공합니다.


선택적 React 강의

이 강의에서 다루는 모든 중요한 React 코드는 별도의 강의로 분리됩니다. 수강생들에게 선택권을 드립니다: React 기술을 강화하고 싶은 수강생(또는 새로운 것을 배우고 싶은 수강생은!) 은 이 강의를 보시고 React 기술에 자신 있는 수강생은 해당 강의들을 건너뛸 수 있습니다.


지원을 아끼지 않는 강사

강사는 Q&A를 통해 도움을 주고 지원을 해준 입증된 실적을 갖고 있습니다. 수강생들과 교류하고, 강의의 개념에 대한 질문에 답하고, 강의 프로젝트에 대한 수강생들의 코드 디버깅을 돕는 것을 좋아합니다. (강의와 관련하여 궁금하신 점은 무엇이든 Q&A에 남기실 수 있지만, 꼭 영어로 남겨주세요. 그래야 답변을 드릴 수 있습니다.)


여러분과 함께 할 여정이 기대되는군요. 1강에서 만나요!


- Bonnie


Screenshots

【한글자막】 Jest 및 테스팅 라이브러리로 React 테스트하기 - Screenshot_01【한글자막】 Jest 및 테스팅 라이브러리로 React 테스트하기 - Screenshot_02【한글자막】 Jest 및 테스팅 라이브러리로 React 테스트하기 - Screenshot_03【한글자막】 Jest 및 테스팅 라이브러리로 React 테스트하기 - Screenshot_04

Content

소개

테스트 라이브러리와 Jest 소개
Create-React-App
테스팅 라이브러리를 사용한 첫 번째 테스트
Jest와 Jest-DOM 단언 (Assertion)
Jest: Watch 모드와 테스트가 작동하는 방식
TDD: 테스트 주도 개발
React 테스팅 라이브러리의 철학
기능(Functional) 테스트 vs 유닛 (Unit) 테스트
TDD (테스트 주도 개발) vs BDD (행동 주도 개발)
테스팅 라이브러리와 접근성

간단한 앱: Color Button

전체 강의 계획
Color Button 앱 시작하기
역할(Role)로 버튼을 찾고 버튼을 클릭하는 테스트
선택적 React 코드: 버튼을 클릭하여 색상 변경하기
수동 인수 (Acceptance) 테스트
버튼과 체크박스의 초기 조건 테스트
가져온(Import) CSS 모듈에서 스타일 테스트하기
코드 퀴즈 소개
코드 퀴즈! 체크박스 체크 시 확인 버튼 비활성화
코드 퀴즈 해답: 체크박스 체크 시 확인 버튼 비활성화
라벨이 있는 체크박스 찾기
코드 퀴즈! 비활성화된 버튼이 회색으로 바뀝니다
유닛(Unit) 테스팅 함수
코드 퀴즈! 새 색상 이름에 대한 테스트 업데이트
유닛(Unit) 테스트를 하는 경우
복습: 간단한 앱

테스팅 라이브러리가 포함된 ESLint와 Prettier

ESLint와 Prettier
필독: 다음 강의에 업데이트가 있습니다
테스팅 라이브러리와 Jest-DOM을 위한 ESLint
필독: 다음 강의에 업데이트가 있습니다
VSCode에서 ESLint 구성하기
VSCode 1.58.0+의 상태 표시줄에 ESLint를 표시하는 방법
VSCode에서 Prettier 구성하기
복습: ESLint와 Prettier

온디맨드 선데이 아이스크림: Form복습과 팝오버

온디맨드 선데이 아이스크림 소개
ESLint와 Prettier 설정
리액트 부트스트랩 설정
코드 구성과 SummaryForm 소개
코드 퀴즈: 체크박스 활성화 버튼
선택적 React 코드: SummaryForm 체크박스와 버튼
리액트 부트스트랩 팝오버와 테스팅 라이브러리 userEvent
Screen 쿼리 메서드
테스트 요소가 페이지에 없음: 팝오버 테스트 시작하기
react-bootstrap 2.x를 사용하는 수강생을 위한 참고 사항
선택적 React 코드: 팝오버
"Not wrapped in act(...)" 에러, 비동기식 사라짐
복습: 요약 양식

Mock Service Worker(MSW)로 서버 응답 시뮬레이션하기

OrderEntry 서버 데이터 소개
Mock Service Worker와 핸들러 소개
Mock Service Worker Server 설정
Mock Service Worker로 테스트하기: 스쿱 옵션
선택적 React 코드: 옵션(Option)과 ScoopOption 컴포넌트
'await findBy'로 비동기식으로 채워지는 요소 찾기
코드 퀴즈! 서버에서 오는 토핑(Topping) 옵션
참고: `Unable to find role="img"` 에러 해결하기
에러 서버 응답 계획
테스트에서 서버 에러 응답 시뮬레이션하기
참고: 다음 강의의 마지막 절반은 선택 사항이 아닙니다!
선택적 React 코드: 옵션(Option) 서버 에러에 대한 경고 배너
선택된 테스트만 실행하는 방법과 `waitFor`
테스트는 통과했지만 경고/에러가 발생하나요?
복습: 서버 에러 응답과 테스트 디버깅 도구

제공자(Provider)에 래핑된 컴포넌트 테스트하기

합계와 소계 테스트 소개
텍스트 입력란 채우기: 소계 테스트
선택적 React 코드: OrderDetails 콘텍스트
선택적 React 코드: 콘텍스트로 스쿱 소계 표시하기
테스트 설정에 콘텍스트 추가하기; 코드 에러 포착 테스트
기본값으로 제공자(Provider)에 래핑할 커스텀 렌더링 생성하기
복습: 콘텍스트가 있는 스쿱 소계
코드 퀴즈! Toppings 소계
선택적 React 코드: Toppings 체크박스
다음 강의의 동일 에러 문자열에 대한 참고 사항
코드 퀴즈! 총계
"Unmounted Component" 에러
기능 테스트는 무엇을 잡아야 합니까? 그리고 리팩터

최종 시험: 주문 단계

최종 시험 소개: 주문 단계
새로운 핸들러 추가하기: 복사/붙여넣기 경고!
디버깅 팁
주문 단계 코딩을 위한 선택적 React 힌트
최종 시험 해답
선택적 React 코드: 주문 단계
프로퍼티로서의 Jest Mock(모의) 함수
복습: 최종 시험과 추가 실습 소개
React 테스팅 라이브러리에서의 일반적인 실수

선택적 추가 연습

새로운 테스트에 대한 표준 질문과 연습 문제 소개
"로딩 중" 텍스트 확인하기
요약 페이지의 조건부 toppings 섹션
주문한 스쿱이 없으면 Order 버튼 비활성화하기
무효한 스쿱 수에 대한 빨간색 입력 상자
무효한 스쿱 수에 대해서는 스쿱 소계 업데이트 없음
주문 확인 페이지의 서버 에러
완강을 축하드리고, 감사합니다!

보너스

쿠폰!

Charts

Price

【한글자막】 Jest 및 테스팅 라이브러리로 React 테스트하기 - Price chart

Rating

【한글자막】 Jest 및 테스팅 라이브러리로 React 테스트하기 - Ratings chart

Enrollment distribution

【한글자막】 Jest 및 테스팅 라이브러리로 React 테스트하기 - Distribution chart

Related Topics

4621352
udemy ID
3/31/2022
course created date
5/17/2022
course indexed date
Bot
course submited by