LearnFit

 YouTube, Jest 강좌 #6 리액트 컴포넌트 + 스냅샷 테스트 - 자바스크립트 테스트 프레임워크

서원석님의 학습노트

[Jest - 요약] 리액트 컴포넌트 + 스냅샷 테스트

#전체

#개발자

#프론트엔드

#자바스크립트

#javascript

#js

#es6

#강좌

#tutorial

#중급

#intermediate

#mock

#목 함수

#jest

#test

#제스트

#테스트

#사용법

#비동기

#asynchronous

#async

#callback

#promise

#await

#toBe

#toEqual

#toStrictEqual

#toBeNull

#toBeUndefined

#toBeDefined

#toBeTruthy

#toBeFalsy

#toBeGreaterThan

#toBeGreaterThanOrEqual

#toBeLessThan

#toBeLessThanOrEqual

#toBeCloseTo

#toMatch

#toThrow

#matcher

#matchers

#beforeAll

#beforeEach

#afterAll

#afterEach

#only

#skip

#react

#component

#testing

#snapshot

#스냅샷

#리액트

#컴포넌트

00:00jest 활용해서 react 컴포넌트 테스트하는 법

03:06snapshot test 하는 법 *snapshot test: 컴포넌트가 성공하는 케이스를 찍어두고 비교하며 테스팅하는 방식

07:01시간에 따라 변화하는 컴포넌트에 대해 snapshot test 하는 법

08:52Date.now = jest.fn(()=> 123456789); 을 하면 Date.now()는 항상 123456789를 return 하는 함수가 됩니다. *Timer 컴포넌트 안의 Date.now에 적용되는 사항입니다. // 참고하기(Timer 컴포넌트 내부 코드) const now = 123456789; const sec = new Date(now).getSeconds(); console.log('sec: ', sec); // sec: 36

09:36snapshot 테스트의 의의와 인지할 점

✔ 학습 완료

취소

작성하기

이 학습노트가 포함된 러닝패스예요.

무료

서원석

의 러닝패스

테스트 코드 이해와 작성의 기초 체력 - Jest(입문자용, 빠르게 학습)

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기

👋 다양한 인사이트를 읽어보고 계신가요?

나만의 학습 기록을 남기고, 관리하고 싶다면!

다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!

나의 학습 내용을 공유하고, 수익을 올리고 싶다면!

3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.

3초 만에 가입하기