프로젝트 에서 jest 테스트 react native 구성 요 소 를 사용 하 는 방법 을 자세히 설명 합 니 다.

현재 자 바스 크 립 트 의 테스트 도구 가 매우 많 지만 React 의 테스트 전략 에 대해 페 이 스 북 이 내 놓 은 ReactJs 레이 블 테스트 도 구 는 Jest.Jest 의 홈 페이지 주소:https://facebook.github.io/jest/입 니 다.Jest 홈 페이지 에서'Painless JavaScript Testing'이 라 고 밝 힌 것 을 볼 수 있다.페 이 스 북 이 서비스 와 React 애플 리 케 이 션 을 테스트 하 는 자바 스 크 립 트 유닛 테스트 프레임 워 크 입 니 다.
단원 테스트 란 각 단원 을 테스트 하 는 것 이다.일반적으로 함수,클래스 또는 단일 구성 요 소 를 대상 으로 하고 시스템 과 통합 과 관련 되 지 않 는 다.유닛 테스트 는 소프트웨어 테스트 의 기초 테스트 이다.Jest 는 주로 다음 과 같은 특징 이 있 습 니 다.

적응성:Jest 는 모듈 화 되 고 확장 가능 하 며 설정 가능 합 니 다.

샌 드 박스 와 빠 른 속도:Jest 는 자바 스 크 립 트 의 환경 을 가상 화 하여 브 라 우 저 를 모 의 하고 병행 할 수 있 습 니 다

스냅 샷 테스트:Jest 는 React 트 리 에 대해 스냅 샷 이나 다른 직렬 화 수 치 를 빠르게 작성 하여 빠 른 업데이트 사용자 체험 을 제공 할 수 있 습 니 다.

비동기 코드 테스트 지원:promises 와 async/await 지원

정적 분석 결 과 를 자동 으로 생 성 합 니 다.테스트 사례 의 실행 결 과 를 표시 할 뿐만 아니 라 문장,분기,함수 등 보급률 도 표시 합 니 다.

유닛 테스트 도 구 를 왜 사용 합 니까?
우 리 는 개발 과정 에서 테스트 도 구 를 사용 하지 않 아 도 스스로 코드 를 써 서 유닛 테스트 를 할 수 있 습 니 다.그러나 우리 의 코드 는 서로 호출 관 계 를 가지 고 있 습 니 다.테스트 과정 에서 우 리 는 유닛 이 상대 적 으로 독립 적 이 고 정상적으로 운행 되 기 를 원 합 니 다.테스트 되 는 함수 의 의존 함수 와 환경 에 대해 mock 을 하고 테스트 데이터 입력 을 해 야 합 니 다.테스트 수행 과 테스트 결과 검사 에 있어 많은 유사 성 이 존재 하 는데 테스트 도 구 는 바로 우리 에 게 이런 부분 에 편 의 를 제공 해 주 었 다.
준비 단계
rn 프로젝트 가 필요 합 니 다.여 기 는 제 개인 프로젝트ReactNative-ReduxSaga-TODO를 보 여 줍 니 다.
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 설정 이 성공 적 인지 테스트 합 니 다.그러나 우 리 는 테스트 용례 를 쓰 지 않 았 습 니 다.단말 기 는 no tests found 를 인쇄 합 니 다.설정 이 완료 되 었 습 니 다.
스냅숏 테스트
구성 요소 쓰기

import React from 'react';
import {
 Text, View,
} from 'react-native';

import PropTypes from 'prop-types';

const PostArea = ({ title, text, color }) => (
 <View style={{ backgroundColor: '#ddd', 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 'react-native';
import React from 'react';
import PostArea from '../js/Twitter/PostArea';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
 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)
  √ renders correctly (5553ms)
 › 1 snapshot written.
Snapshot Summary
 › 1 snapshot written in 1 test suite.
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   1 added, 1 total
Time:        8.198s
Ran all test suites.
또한,test 폴 더 아래 에서 스냅 샷 을 만 들 기 위 한 파일 을 출력 합 니 다.

// 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 를 사용 하여 현재 스냅 샷 을 덮어 씁 니 다.
두 번 째 줄의 번 호 를 14 로 변경 합 니 다.

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

이때,우 리 는 다시 jest 를 운행 합 니 다.이 때 단말 기 는 오 류 를 던 지고 잘못된 위 치 를 지적 합 니 다.

이 코드 는 우리 가 의도 적 으로 고 쳤 기 때문에,이때 jest-u 를 실행 하면 스냅 샷 이 덮어 집 니 다.제 스 트 를 실행 하면 틀 리 지 않 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.