이번에는 Jest로 React Native 컴포넌트를 테스트하는 단계와 Jest로 React Native 컴포넌트를 테스트할 때 주의사항에 대해 알려드리겠습니다.
현재 Javascript에 대한 테스트 도구가 많이 있지만 React 테스트 전략의 경우 Facebook에서 출시한 ReactJs용 표준 테스트 도구는 Jest.Jest의 공식 웹사이트 주소입니다: https://facebook.github.io/jest /. Jest 공식 웹사이트에서 Painless JavaScript Testing이라고 주장하는 것을 볼 수 있습니다. 서비스 및 React 애플리케이션을 테스트하기 위한 Facebook의 JavaScript 단위 테스트 프레임워크입니다.
소위 단위 테스트는 각 단위를 테스트하는 것으로 일반적으로 기능, 클래스 또는 개별 구성 요소를 대상으로 하며 시스템 및 통합을 포함하지 않습니다. 단위 테스트는 소프트웨어 테스트의 기본 테스트입니다. Jest에는 주로 다음과 같은 기능이 있습니다:
적응성: Jest는 모듈식이며 확장 가능하고 구성 가능합니다.
빠른 샌드박스: Jest는 JavaScript 환경을 가상화하고, 브라우저를 시뮬레이션하고, 병렬로 실행할 수 있습니다.
스냅샷 테스트: Jest는 React 트리 또는 기타 직렬화된 값의 스냅샷을 찍어 빠르게 테스트를 작성할 수 있습니다. 업데이트된 사용자 경험.
비동기 코드 테스트 지원: Promise 및 async/await 지원
정적 분석 결과 자동 생성: 테스트 케이스 실행 결과뿐만 아니라 명령문, 분기, 함수 등의 적용 범위도 표시합니다.
단위 테스트 도구를 사용해야 하는 이유
개발 과정에서 테스트 도구를 사용하지 않고도 단위 테스트를 위한 자체 코드를 작성할 수 있지만 코드에는 상호 호출 관계가 있으며 테스트 과정에서 우리는 희망합니다. 유닛을 상대적으로 독립적으로 만들고 정상적으로 실행하려면 테스트 중인 함수의 종속 기능과 환경을 모의해야 하며 테스트 데이터 입력, 테스트 실행 및 테스트 결과 확인에서 유사점이 많습니다. 이러한 측면은 편의성을 제공합니다.
준비 단계
rn 프로젝트가 필요합니다. 여기에 설명된 것은 내 개인 프로젝트입니다. ReactNative-ReduxSaga-TODO
jest 설치
반응 네이티브 init 명령줄을 사용하여 rn 프로젝트를 생성했다면 rn 버전이 0.38 이상인 경우에는 설치할 필요가 없습니다. 확실하지 않은 경우
package.json 파일에 다음 코드가 포함되어 있는지 확인하세요.
// package.json
"scripts": {
"test": "jest"
},
"jest": {
"preset": "react-native"
}그렇지 않은 경우 npm i jest --save-dev를 설치하고 위 코드를 패키지의 해당 위치에 추가하세요. 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;프로젝트 루트 디렉터리에서 테스트 폴더를 찾으세요. 이제 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 testPostArea_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를 다시 실행하면 오류가 발생하지 않습니다~
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보는 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 주세요!
추천 자료:
위 내용은 Jest가 반응 네이티브 구성 요소를 테스트하는 단계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
