라이브러리 반응 테스트 vs Jaek

라이브러리 반응 테스트 vs Jaek

리액트(페이지, 모달, 테이블 등)를 사용하는 매우 큰 어플리케이션을 가지고 있으며, 상태 관리에 redux-saga를 사용하고 있습니다.스토어가 많이 있고 거의 모든 컴포넌트에서 useSelector 방식을 사용하여 스토어에서 데이터를 가져오고 논리상 많은 훅을 사용하고 있습니다.

특히 데이터가 정의되어 있지 않거나 유효하지 않은 경우 앱이 크래쉬하지 않도록 앱 테스트를 시작하고 싶습니다.이 경우 어떤 도서관을 추천합니까?

React Testing Library와 Jeste는 모두 다른 책임을 가지고 있습니다.React Testing Library는 명령어를 입력할 때 테스트 주자가 아닙니다.npm test ★★★★★★★★★★★★★★★★★」npm run test로 끝나는 모든 파일을 수집하는 것은 농담의 책임이다..test.js및를 다음과 합니다.

리액트 테스트 라이브러리는 dom 요소를 포착하고 아래의 몇 가지 액션을 수행하는 기능을 제공합니다.

render, fireEvent, waitFor, screen

또한 이러한 기능을 위해 효소(또 다른 인기 있는 테스트 라이브러리)를 사용하여 돔 요소에 액세스할 수 있습니다.

엑스트라: 개발자가 종종 혼동하는 경우

• 우스갯소리를 하다
• 반응성 매개의
• 효소

여기서 효소와 반응 검사 라이브러리는 서로 유사한 두 가지이며 서로 다른 방법을 사용할 수 있습니다.

• 우스갯소리로 효소 또는
• 농담으로 반응하다
• 리액트 테스트 라이브러리+효소 등 세 가지 모두를 농담과 함께 사용할 수도 있습니다.
• 그러나 농담이나 다른 테스트 주자 없이 효소와 반응 테스트 라이브러리를 사용할 수 없습니다. 예를 들어: Mocha

여기서 jest(둘 다 테스트 라이브러리)는 모든 .test.dom 파일을 수집하여 모든 테스트 케이스를 실행하고 몇 개의 합격과 불합격과 react-dom-dom 또는 exyze(둘 다 테스트 라이브러리)와 같은 자세한 출력을 콘솔에 표시합니다.

React Developer에 대한 일반적인 질문/혼란

리액트 테스트 라이브러리란?

테스트용 가상 DOM 제공 - 브라우저를 사용하지 않고 테스트를 실행할 때는 항상 가상 DOM이 필요합니다.클릭 요소 등의 작업을 수행할 수 있으며 가상 DOM이 정상적으로 동작하는지 여부를 확인할 수 있습니다(버튼 클릭으로 div의 색상을 변경하는 등).

Jest는 리액트 테스트 라이브러리와 어떤 관계가 있습니까?

• Jest는 Javascript 테스트 라이브러리(React뿐만 아니라 JS 관련 프레임워크 또는 라이브러리)입니다.Jeest는 테스트 주자이며 다음을 담당합니다.
  • 테스트 검색
  • 테스트 실행
  • 테스트 합격 여부 확인
• React Testing Library와 Jest는 모두 함께 동작합니다(이 점을 이해하려면 다음 이미지를 참조하십시오).

• Create-React-App은 기본적으로 React-Testing-Library와 함께 제공되며, 여기에는 Jest도 포함되어 있으므로 다른 것을 설치할 필요가 없습니다.

효소와 모카가 뭐죠?

효소(Airbnb에 의해 개발됨)는 리액트 테스트 라이브러리(Jest는 아님)의 대안이다.위의 스크린샷에서 가상 DOM을 제공하기 위해 React-Testing-Library가 사용되었음을 기억하십시오.유사한 변형은 효소에 의해 수행될 것이다.RTL과 같은 효소는 테스트 러너가 아니기 때문에 Jest와 같은 러너가 필요할 수 있습니다.

모카는 제스트의 대안이다.

아래 조합이 가능합니다.

• + Jest 테스트 + Jest(React's recommended combination, inbuilt into Create-React-App)
• 효소+제스트
• 리액트 테스트 라이브러리 + Mocha
• 효소+모카

테스트의 종류에는 어떤 것이 있습니까?

• 유닛 테스트

  • 코드 단위를 한 번에 하나씩 테스트합니다.다른 유닛에 의존하지 않고 단일 기능 또는 컴포넌트일 수 있습니다.

• 통합 테스트

  • 여러 장치가 함께 작동하는 방식을 테스트합니다.서로 다른 기능/단위/구성요소 간의 상호작용 테스트

• 기능/동작 테스트

  • 기능 테스트란 기능/소프트웨어의 동작을 테스트하는 것을 의미합니다.소프트웨어가 특정 데이터 세트를 올바르게 처리하는지 테스트하고 있을 수 있습니다.다른 단위와 상호 작용해야 하므로 통합 테스트일 수 있습니다.기능 테스트도 통합 테스트가 될 수 있습니다.

  • 기능 테스트는 단순한 단위 테스트일 수도 있습니다.예를 들어 버튼을 클릭했을 때 div가 빨간색으로 바뀝니다.이것은 단순한 단위 테스트일 수 있지만, CLICK TRUNGS RED 또는 NOT의 특정 동작을 테스트하기 때문에 기능 테스트로 간주할 수도 있습니다.

  • 기능 테스트란 코드를 테스트하는 것이 아니라 동작을 테스트하는 것을 의미합니다.리액트 테스트 라이브러리 기능 테스트 권장

• 승인/엔드 투 엔드(E2E) 테스트

  • 이것은 엔드 투 엔드 테스트로, 브라우저와 서버가 필요할 수 있습니다.

  • E2E 테스트에 널리 사용되는 도구는 Cypress와 Selenium입니다.

    • Cypress는 Javascript만 지원하는 반면 Selenium은 Java, Python, Ruby, C#, Php 등 모든 인기 언어를 지원합니다.확인 - 편백 VS 셀레늄

  • 리액트 테스트 라이브러리는 E2E 테스트를 지원하지 않습니다.

조롱 또는 스텁이란 무엇입니까?

시나리오와 함께 설명하겠습니다.다른 도시의 기후를 확인하기 위한 웹사이트를 만들었다고 가정해 봅시다.이 앱은 Weather-API라는 외부 소스에서 데이터를 가져옵니다(fetch 또는 axios 라이브러리를 사용).어떤 도시든 검색할 수 있고 적절한 기후 조건을 제공합니다.

이제 이 앱을 테스트해야 합니다.예를 들어 도시가 매개 변수로 전달되면 외부 API(이 경우 Weather-API)에 호출하여 데이터를 가져오고 예상 값이 가져온 값과 동일한지 테스트하는 expect 문을 작성하는 이 기능을 테스트하는 단위 테스트를 작성한다고 가정합니다.

자세히 살펴보면 유닛 테스트를 실행할 때마다 Weather-API를 호출하고 있습니다.이 접근법의 단점은 다음과 같습니다.

• 앱에서 외부 API를 테스트하고 있습니다(필수는 아닙니다).
• 이렇게 하면 API 콜(대부분 과금)이 낭비됩니다.
• Weather-API 개발자가 이미 테스트했을 수 있으므로 외부 API를 테스트할 필요가 없으며 외부 서비스가 아닌 앱만 테스트해야 합니다.

그렇다면 해결책은 무엇일까요?해결책은 외부 API의 응답을 모방하여 실제 값으로 테스트하는 것입니다.이 값을 예상 값과 비교하여 테스트할 수 있습니다.이것은 모킹이라고 불린다.이 작업을 하는 이유는 외부 서비스가 우리에게 제공하는 것을 이미 알고 있기 때문에 API를 호출할 필요가 없으며 단순히 값을 실제 값으로 하드코드할 필요가 없기 때문입니다.

레퍼런스:Jest와 반응 테스트 - Bonnie Schulkin

자원:

테스트를 이해하고 그 테스트를 비웃기 위해, 이것들은 좋은 무료 유튜브 동영상입니다.

• JavaScript 테스트 - 유닛, 통합 및 e2e - Max, Academind
• JavaScript 테스트 - 모의 비동기 코드 - Max, Academind
• 리액트 테스트 라이브러리 크래시 코스 - Laith Academy
• Stackoverflow - 조롱하는 것

좀 더 자세히 이해하기 위해, 이것들은 유료 udemy 코스입니다.

• 리액트 테스트 라이브러리 부트캠프 - Laith Harb
• Jest와 반응 테스트 - Bonnie Schulkin

React Testing Library는 Jest의 대안이 아닙니다. 왜냐하면 그들은 서로를 필요로 하고 그들 모두 명확한 임무를 가지고 있기 때문입니다.

Jest는 테스트 실행자이며 명령줄에서 Jest를 사용하여 테스트를 실행할 수 있습니다.또한 Jest에서는 테스트 스위트, 테스트 케이스 및 어설션 기능을 제공합니다.리액트 테스트 라이브러리는 Jest와 달리 리액트 컴포넌트를 테스트하기 위한 테스트 라이브러리 중 하나입니다.

create-react-app을 사용하는 경우 설치 시 기본적으로 Jest(및 React Testing Library)가 제공됩니다.커스텀 React 설정을 사용하고 있는 경우는, Jest(및 React Testing Library)를 직접 인스톨 해 설정할 필요가 있습니다.

자세한 것은, https://jestjs.io/docs/en/tutorial-react 및 https://testing-library.com/docs/react-testing-library/intro/ 를 참조해 주세요.또한 라이브러리의 github 채널에서 문제 및 디스커션에 대한 자세한 내용을 확인할 수 있습니다.

재스트

Jest는 단순성에 초점을 맞춘 쾌적한 JavaScript 테스트 프레임워크입니다.Babel, TypeScript, Node, React, Angular, Vue 등을 사용하는 프로젝트와 함께 작동합니다.

src: 농담

TLDR: Jest는 많은 보일러 플레이트 없이 위의 모든 것을 빠르게 테스트할 수 있도록 합니다.프레임워크로서 프레임워크의 코드가 테스트 코드를 호출합니다.Jeest는 특정 테스트 케이스 등을 실행하기 위해 코드 변경을 찾습니다.Jest(React Documentation)를 사용하여 React에 대한 테스트를 작성할 수 있습니다.

리액트 테스트 라이브러리

"React Testing Library는 React 컴포넌트를 테스트하기 위한 매우 가벼운 솔루션입니다.리액트 돔과 리액트 돔/테스트 유틸리티에 더해 경량 유틸리티 기능을 제공하여 테스트 프랙티스의 향상을 촉진합니다.src: RTL

TLDR: 이것은 라이브러리입니다(즉, 코드를 호출합니다).Jest를 사용하는 것 외에 기본 react-dom/jest-utils를 사용하여 테스트를 신속하게 작성할 수 있습니다(복수의 act() 콜을 사용하는 것 등).또한 실제 사용(접근성)에 가깝습니다.

모의 서버 작업자와 함께 RTL을 사용하여 대규모 프로젝트의 작업을 보다 쉽게 수행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/66341449/testing-library-react-vs-jest