inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

따라하며 배우는 리액트 테스트 [2023.11 업데이트]

[중요] 쇼핑몰 프로젝트를 위한 시작 소스 코드

jest와 @testing-library/jest-dom

1154

Leo

작성한 질문수 13

1

너무 기초적인 질문인 것 같아 걱정이지만 질문드립니다~!

1. jest와 @testing-library/jest-dom는 어떤 차이가 있고 각각의 역할이 궁금합니다.

2. @testing-library와 함께 사용하는 이유와 jest만 따로 사용하지는 않는 이유가 궁금합니다.

 

 

웹앱 react React-Context jest

답변 1

6

John Ahn

안녕하세요 ! 

좋은 질문 감사합니다! 
React Testing Library는 요소를 렌더링 하는 부분을 다루고, Jest는  Dom의 노드들을 테스트합니다.

1. jest와 @testing-library/jest-dom는 어떤 차이가 있고 각각의 역할이 궁금합니다.

이 질문의 답변은 

The problem

You want to use jest to write tests that assert various things about the state of a DOM. As part of that goal, you want to avoid all the repetitive patterns that arise in doing so. Checking for an element's attributes, its text content, its css classes, you name it.

This solution

The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

 

이렇게 봐주시면 되는데 testing-library와 함께 쓰는데 훨씬 효율적으로 사용할 수 있게 해줍니다.

 

2. @testing-library와 함께 사용하는 이유와 jest만 따로 사용하지는 않는 이유가 궁금합니다.

이 부분은 
React Testing Library는 요소를 렌더링 하는 부분을 다루고, Jest는  Dom의 노드들을 테스트합니다.

이렇게 얘기하신 것 처럼 두개가 다른 역할을 하기 때문입니다.  
감사합니다 !

제공해주신 코드를 vscode에서 켜도 eslint가 안됩니다.

0

284

2

ERROR

0

210

1

테스트 시간을 단축할 수 있는 방법에 대하여 문의드립니다.

0

362

1

useState 배열값 변경의 경우 테스트 멈춤

0

413

1

test was not wrapped in act관련 질문

0

292

2

안녕하세요! 로딩 상태 테스트에 관련된 질문입니다.

0

396

1

강의 관련 내용 github 업로드 질문

0

308

1

이미지가 안보인다 하셔서 다시 질문드립니다.

0

415

2

Test Fail이 발생합니다 ㅠㅠ

0

357

1

스타일 컴포넌트 테스트 방법

0

440

1

msw 에러

0

636

1

toHaveTextContent 에러

0

448

1

msw안돼는사람

0

582

1

This could be because the text is broken up by multiple elements. 에러

0

1717

2

Type.test.js파일에 궁금한점이 생겼습니다

0

352

1

28강 수강 중 JSX 작성 방법에 대해 궁금해져서 질문 남깁니다!

0

401

1

toHaveTextContent 에서 에러가 자꾸 나는데 아무리 찾아도 잘 모르겠습니다.

0

612

2

aria-*

0

444

1

This XML file does not appear to have any style information associated with it. The document tree is shown below. 에러

1

14127

1

컴포넌트 props내려줄때 코드는 어떻게 해야하나요

0

249

0

es6 jest 미지원 오류 문의

0

860

1

test 여러 개 실행 - fail 발생

0

292

1

useMemo

0

284

1

axios 1.1.2 버전 issue ( SyntaxError: Cannot use import statement outside a module)

4

2228

5