찾다
웹 프론트엔드JS 튜토리얼jest를 사용하여 프로젝트의 반응 네이티브 구성 요소를 테스트하는 방법

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

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

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

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

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

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

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

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

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

준비 단계

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

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


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

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

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

관련 권장 사항 :

React Native 커스텀 컴포넌트로 서랍 메뉴 제어 효과 구현

React Native와 WebView 간의 통신에 대해

React 기본 수직 캐러셀 구성요소 패키징에 대한 자세한 설명

위 내용은 jest를 사용하여 프로젝트의 반응 네이티브 구성 요소를 테스트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
react中canvas的用法是什么react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React是双向数据流吗React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

react中为什么使用nodereact中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

react中forceupdate的用法是什么react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react是组件化开发吗react是组件化开发吗Apr 22, 2022 am 10:44 AM

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

react和reactdom有什么区别react和reactdom有什么区别Apr 27, 2022 am 10:26 AM

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경