Jest가 반응 네이티브 구성 요소를 테스트하는 단계는 무엇입니까?

이번에는 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에는 주로 다음과 같은 기능이 있습니다:

1. 적응성: Jest는 모듈식이며 확장 가능하고 구성 가능합니다.

2. 빠른 샌드박스: Jest는 JavaScript 환경을 가상화하고, 브라우저를 시뮬레이션하고, 병렬로 실행할 수 있습니다.

3. 스냅샷 테스트: Jest는 React 트리 또는 기타 직렬화된 값의 스냅샷을 찍어 빠르게 테스트를 작성할 수 있습니다. 업데이트된 사용자 경험.

4. 비동기 코드 테스트 지원: Promise 및 async/await 지원

5. 정적 분석 결과 자동 생성: 테스트 케이스 실행 결과뿐만 아니라 명령문, 분기, 함수 등의 적용 범위도 표시합니다.

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

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

준비 단계

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: &#39;#ddd&#39;, 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를 호출하여 현재 스냅샷을 덮어씁니다.

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

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

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

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보는 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 주세요!

추천 자료:

JS 텍스트의 간헐적인 루프 스크롤 효과를 얻는 방법

JS가 노드에 새 요소를 추가

위 내용은 Jest가 반응 네이티브 구성 요소를 테스트하는 단계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!