농담을 사용하여 반응 구성 요소를 테스트하는 방법

이 기사는 페이스 북-관리 테스트 프레임 워크 인 Jest를 사용하여 반응 구성 요소와 일반 JavaScript 기능을 테스트합니다. 반응 특정 기능으로 이동하기 전에 간단한 JavaScript 기능으로 시작하겠습니다. Jest는 독점적으로 React가 아닙니다. JavaScript 응용 프로그램에 충분히 다재다능합니다. 그러나 그 기능은 UI 테스트에 특히 유용하므로 React에 이상적입니다.

키 포인트 :

Jest를 사용하여 반응 구성 요소 및 JavaScript 함수를 테스트하십시오 간단한 JavaScript 기능으로 시작하여 Jest의 기본 사항을 배우십시오 반응 호환성을 위해 농담과 바벨을 설치하십시오 효율적인 테스트 재고를 위해 Jest의 시계 모드를 사용하십시오 RECT 구성 요소의 경우 효소 또는 반응 테스트 라이브러리를 고려하십시오 jest의 조롱, 스파이 및 병렬 테스트를 활용하십시오

샘플 todo 응용 프로그램 : 작은 TODO 응용 프로그램 (GitHub 및 Live Demo에서 제공)은 시험 대상 역할을합니다. ES2015, Webpack 및 Babel을 사용하여 제작되었습니다. 핵심 논리는 에 있으며, 응용 프로그램 상태를 관리하는 순수한 함수 (,

, )를 포함합니다. 이러한 기능은 Redux Reducers와 유사합니다.

테스트 중심 개발 (TDD) :
• TDD (코드 전 작성 테스트)에는 장점이 있지만 접근 방식은 종종 개인적인 취향의 문제입니다. React 구성 요소의 경우 먼저 구성 요소를 작성한 다음 테스트를 추가하는 경우가 종종 있습니다.
농담 소개 : Facebook에서 크게 개선 된 Jest는 다른 프레임 워크에 비해 간소화 된 설정을 제공합니다. 병렬 테스트 실행 및 시계 모드는 테스트 속도와 효율성을 크게 향상시킵니다. Node.js 내에서 브라우저와 같은 테스트를위한 JSDOM이 포함되어 있으며 비동기 테스트, 조롱, 스파이 및 스터브를 지원합니다. 설치 및 구성 :
• 필요한 패키지를 설치하십시오 :
• 파일이 존재하는지 확인하십시오 (원본 기사에 제공된 예). jest는
디렉토리의 테스트를 기대합니다 (또는
• 또는 로 끝나는 파일).
비즈니스 로직 테스트 :
에 대한 간단한 테스트는 Jest의 사용법을 보여줍니다 :
> 객체/배열 비교에 사용되는 반면

는 원시 유형에 사용됩니다. JEST의 시계 모드 (

또는 )는 파일 변경에 대한 테스트를 자동으로 다시 실행합니다. 에 대한 비슷한 테스트도 원래 기사에도 표시됩니다. 테스트 반응 구성 요소 : 테스트 반응 구성 요소는 종종 비즈니스 로직보다 포괄적 인 테스트를 포함합니다. 효소 (또는 React 팀이 권장하는 REACT 테스트 라이브러리)는이 과정을 단순화합니다. 효소와 적절한 어댑터를 설치하십시오 :

를 구성하려면 를 작성하십시오

<code class="language-bash">npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react</code>

: setup-tests.js : 를 사용하려면 jest를 구성하십시오

<code class="language-javascript">import { toggleDone } from '../app/state-functions';

test('toggleDone completes an incomplete todo', () => {
  const startState = [{ id: 1, done: false, text: 'Buy Milk' }];
  const finState = toggleDone(startState, 1);
  expect(finState).toEqual([{ id: 1, done: true, text: 'Buy Milk' }]);
});</code>

구성 요소 렌더링에 대한 테스트가 표시되고

를 사용하여 렌더링하고 package.json를 찾으려면 요소를 찾습니다. 후속 테스트는 setup-tests.js를 사용하여 스파이 함수를 생성하고 이벤트를 트리거하려면 로 기능 호출을 확인합니다.

결론 :

<code class="language-bash">npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17</code>

Jest의 속도, 시계 모드 및 표현식 API는 강력한 테스트 프레임 워크가됩니다. 이 기사는 그 이점에 대한 요약 및 추가 읽기 제안과 함께 반응 구성 요소를 테스트하는 것에 대한 일반적인 질문을 다루는 FAQ와 함께 결론을 내립니다. FAQ는 , 반응 테스트 렌더러, 소품으로 구성 요소 테스트 및 구성 요소 내의 테스트 기능을 덮습니다.

위 내용은 농담을 사용하여 반응 구성 요소를 테스트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!