현재 많은 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 '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)
√ 올바르게 렌더링됩니다(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를 호출하여 현재 스냅샷을 덮어씁니다.
원래 코드를 변경해 보겠습니다. 두 번째 줄
<Text style={{ fontSize: 14, color }}>{text}</Text>
이때 jest를 다시 실행합니다. 이때 터미널에서는 오류가 발생하며 오류 위치를 알려줍니다
이 코드는 우리가 의도적으로 변경한 코드이므로 jest -u를 실행하면 스냅샷이 덮어쓰이게 됩니다. jest를 다시 실행하면 오류가 발생하지 않습니다~
관련 권장 사항 :
React Native 커스텀 컴포넌트로 서랍 메뉴 제어 효과 구현
React Native와 WebView 간의 통신에 대해
React 기본 수직 캐러셀 구성요소 패키징에 대한 자세한 설명
위 내용은 jest를 사용하여 프로젝트의 반응 네이티브 구성 요소를 테스트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!