all rights and copyrights are belong to
https://bonnie.dev/

Jest?

• 테스트 러너
  - 테스트 찾기 (find tests)
  - 테스트 실행 (run tests)
  - 테스트 성공, 실패 판단 (determine whether the tests pass or fail)
• CRA 에 기본 포함

jest-dom

• CRA 에 기본 설치됨
• src/setupTests.js 를 모든 테스트 마다 import, matchers 들을 사용가능하게 만들어줌
• DOM-based matchers

---

Enzyme, React-Testing-Library?

• Virtual DOM 을 테스트 목적으로 생성

• Browser 없이도 DOM 조작 가능

• Virtual DOM 을 찾아줌

• Virtual DOM 과 결합

  

---

Enzyme vs React-Testing-Library? 👽

최신인 RTL 부터 하자! (5,736,755 vs 2,058,073) 약 2.8배 사용자 차이
Enzyme 은 쓸일이 있으면..

npm trends @testing-library/react vs enzyme

• CRA 는 기본적으로 React-Testing-Library (RTL) 과 함께옴 (react 에서 공식추천)
• Enzyme 은 Legacy, RTL 은 새 것

---

1. 둘의 공통점은?

• 둘다 Virtual DOM 을 다룸
• 개념적인 접근이 다름

2. Enzyme -> Isolated testing (고립 테스팅)

   • Shallow rendering: 테스트 하고자 하는 컴포넌트만 골라서 사용가능 (부모, 자식 관계는 관계 없이)

3. React Testing Library -> functional testing (작동 테스팅)

   • 유저 의도로 작동하게 테스트
   • 부모, 자식 컴포넌트 모두 사용하여 사용 (less isolated)

---

Why to prefer Enzyme over RTL?

1. 전통적인 방식 (code-based, enzyme)

• 코드와 더욱 디커플링됨
• Unit Test 가 매우 isolated
• Test 점검이 직관적이고, 검사하기 쉬움
• 다른 언어들도 일케 생겨서 개념 공유 가능

2. Functional user flow tests (functional-based, React-Testing-Library)

• refactor 하기에, 코드 엮은 것까지 테스트가 되므로, 더 나음
• test 점검이 더 복잡함
• code-based test 가능은 한데 권장 X

Testing React: A convert’s journey from Enzyme to Testing Library

---

then Why to prefer RTL over Enzyme?

1. 실제로 유저가 사용되는 관점으로 테스팅 가능 (코드에 상관없이)
2. test Id 로 element 를 찾는 것이 아닌, accessiblity marker 로 찾음

Enzyme is dead. Now what?
Why I currently recommend React Testing Library

---

Shallow Rendering ? 🤔

• 컴포넌트를 1 depth 만 렌더
• 반대 개념은 Mount Rendering (전부 렌더)

---

How does Jest work?

• global test function w/ 2 parametres
  - string description
  - test function
• error 발생 시 test fail!
  - expection fail -> assertions 이 throw error
• No error -> test pass!
  • empty test 도 pass

---

Jest 의 Assertion 이란?

expect(element.textContent).toBe('hello');
expect(elementsArray).toHaveLength(7);

---

Accessibility and Finding Elements

• W3C Accessibility Handler 에 의한 설계를 추천 (RTL 공식)

test 하려는 동작에 따라 우선순위가 부여 되어있음 which query should I use?
그리고 role 의 종류는 w3c role definition

---

What to test?

---