집 > 기사 > 웹 프론트엔드 > jest를 사용하여 프로젝트의 반응 네이티브 구성 요소를 테스트하는 방법

jest를 사용하여 프로젝트의 반응 네이티브 구성 요소를 테스트하는 방법

小云云원래의: 2018-02-11 09:36:561763검색

현재 많은 Javascript 테스트 도구가 있지만 React 테스트 전략의 경우 Facebook에서 출시한 ReactJs용 표준 테스트 도구는 Jest.Jest 공식 웹사이트 주소: https://facebook.github.io/jest/입니다. Jest 공식 웹사이트에서 Painless JavaScript Testing이라고 주장하는 것을 볼 수 있습니다. 서비스 및 React 애플리케이션을 테스트하기 위한 Facebook의 JavaScript 단위 테스트 프레임워크입니다. 이 기사에서는 모든 사람이 참조할 수 있도록 Jest를 사용하여 프로젝트의 React 네이티브 구성 요소를 테스트하는 방법을 주로 소개합니다.

소위 단위 테스트는 각 단위를 테스트하는 것으로 일반적으로 기능, 클래스 또는 개별 구성 요소를 대상으로 하며 시스템 및 통합을 포함하지 않습니다. 단위 테스트는 소프트웨어 테스트의 기본 테스트입니다. Jest에는 주로 다음과 같은 기능이 있습니다:

적응성: Jest는 모듈식이며 확장 가능하고 구성 가능합니다.
빠른 샌드박스: Jest는 JavaScript 환경을 가상화하고, 브라우저를 시뮬레이션하고, 병렬로 실행할 수 있습니다.
스냅샷 테스트: Jest는 React 트리 또는 기타 직렬화된 값의 스냅샷을 찍어 빠르게 테스트를 작성할 수 있습니다. 업데이트된 사용자 경험.
비동기 코드 테스트 지원: Promise 및 async/await 지원
정적 분석 결과 자동 생성: 테스트 케이스 실행 결과뿐만 아니라 명령문, 분기, 함수 등의 적용 범위도 표시합니다.

단위 테스트 도구를 사용해야 하는 이유

개발 과정에서 테스트 도구를 사용하지 않고도 단위 테스트를 위한 자체 코드를 작성할 수 있지만 코드에는 상호 호출 관계가 있으며 테스트 과정에서 우리는 희망합니다. 유닛을 상대적으로 독립적으로 만들고 정상적으로 실행하려면 테스트 중인 함수의 종속 기능과 환경을 모의해야 하며 테스트 데이터 입력, 테스트 실행 및 테스트 결과 확인에서 유사점이 많습니다. 이러한 측면은 편의성을 제공합니다.

준비 단계

rn 프로젝트가 필요합니다. 여기서 보여주는 것은 내 개인 프로젝트입니다. ReactNative-ReduxSaga-TODO

Install jest

react-native init 명령줄을 사용하여 rn 프로젝트를 생성했다면, rn 버전이 0.38 이상인 경우에는 설치할 필요가 없습니다. 확실하지 않은 경우

package.json 파일에 다음 코드가 포함되어 있는지 살펴보세요.

 // package.json
 "scripts": {
  "test": "jest"
 },
 "jest": {
  "preset": "react-native"
 }

그렇지 않은 경우 npm i jest --save-dev를 설치하고 위 코드를 package.json 파일의 해당 위치.

위 단계를 완료한 후 npm run test를 실행하여 jest가 성공적으로 구성되었는지 테스트하세요. 그러나 우리는 테스트 케이스를 작성하지 않았으며 터미널은 테스트를 찾을 수 없다고 인쇄합니다. 이제 구성이 완료되었습니다.

스냅샷 테스트

컴포넌트 작성

import React from &#39;react&#39;;
import {
 Text, View,
} from &#39;react-native&#39;;

import PropTypes from &#39;prop-types&#39;;

const PostArea = ({ title, text, color }) => (
 <View style={{ backgroundColor: &#39;#ddd&#39;, height: 100 }}>
  <Text style={{ fontSize: 30 }}>{title}</Text>
  <Text style={{ fontSize: 15, color }}>{text}</Text>
 </View>
);

export default PostArea;

프로젝트 루트 디렉터리에서 __test__ 폴더를 찾으세요. 이제 React의 테스트 렌더러와 Jest의 스냅샷 기능을 사용하여 컴포넌트와 상호 작용하고 렌더링된 출력을 캡처해 보겠습니다. 스냅샷 파일을 생성합니다.

// PostArea_test.js
import &#39;react-native&#39;;
import React from &#39;react&#39;;
import PostArea from &#39;../js/Twitter/PostArea&#39;;

import renderer from &#39;react-test-renderer&#39;;

test(&#39;renders correctly&#39;, () => {
 const tree = renderer.create(<PostArea title="title" text="text" color="red" />).toJSON();
 expect(tree).toMatchSnapshot();
});

그런 다음 터미널에서 npm run test 또는 jest를 실행하세요. 출력됩니다:

PASS __tests__PostArea_test.js (6.657s)
√ 올바르게 렌더링됩니다(5553ms)

> 1개의 스냅샷이 작성되었습니다.
스냅샷 요약
> 1개의 테스트 모음에 1개의 스냅샷이 작성되었습니다.

테스트 모음: 1 통과, 1 총
테스트: 1개 통과, 총 1개
스냅샷: 1개 추가, 총 1개
시간: 8.198s
모든 테스트 모음을 실행했습니다.

동시에 생성된 테스트 폴더에 파일이 출력됩니다. 스냅 사진.

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
 style={
  Object {
   "backgroundColor": "#ddd",
   "height": 100,
  }
 }
>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "fontSize": 30,
   }
  }
 >
  title
 </Text>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "color": "red",
    "fontSize": 15,
   }
  }
 >
  text
 </Text>
</View>
`;

소스 파일 수정

다음번에 테스트를 실행하면 렌더링된 출력이 이전에 생성된 스냅샷과 비교됩니다. 스냅샷은 코드와 함께 제출되어야 합니다. 스냅샷 테스트가 실패하면 의도적이거나 의도하지 않은 변경 사항이 있는지 확인해야 합니다. 변경 사항이 예상한 대로이면 jest -u를 호출하여 현재 스냅샷을 덮어씁니다.

원래 코드를 변경해 보겠습니다. 두 번째 줄 7afbc23223af17d69e2ad2a4e42c6248의 글꼴 크기를 14로 변경합니다.

<Text style={{ fontSize: 14, color }}>{text}</Text>

이때 jest를 다시 실행합니다. 이때 터미널에서는 오류가 발생하며 오류 위치를 알려줍니다

이 코드는 우리가 의도적으로 변경한 코드이므로 jest -u를 실행하면 스냅샷이 덮어쓰이게 됩니다. jest를 다시 실행하면 오류가 발생하지 않습니다~

jest를 사용하여 프로젝트의 반응 네이티브 구성 요소를 테스트하는 방법

관련 기사