這篇文章主要介紹了怎樣在項(xiàng)目中使用jest測(cè)試react native組件，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

走過十載，我們已為眾多企業(yè)及政府機(jī)關(guān)提供專業(yè)的互聯(lián)網(wǎng)服務(wù)。我們不只是一家專業(yè)網(wǎng)站建設(shè)公司；我們對(duì)營銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，創(chuàng)新互聯(lián)采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！創(chuàng)新互聯(lián)經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。

目前Javascript的測(cè)試工具很多，但是針對(duì)React的測(cè)試策略，F(xiàn)acebook推出的ReactJs標(biāo)配測(cè)試工具是Jest.Jest的官網(wǎng)地址：https://facebook.github.io/jest/。我們可以看到Jest官網(wǎng)宣稱的是：Painless JavaScript Testing。是Facebook用于測(cè)試服務(wù)和React應(yīng)用程序的JavaScript單元測(cè)試框架。

所謂單元測(cè)試也就是對(duì)每個(gè)單元進(jìn)行測(cè)試，通俗的將一般針對(duì)的是函數(shù)，類或單個(gè)組件，不涉及系統(tǒng)和集成。單元測(cè)試是軟件測(cè)試的基礎(chǔ)測(cè)試。Jest主要有以下特點(diǎn)：

1. 適應(yīng)性：Jest是模塊化、可擴(kuò)展和可配置的。

2. 沙箱和快速：Jest虛擬化了JavaScript的環(huán)境，能模擬瀏覽器，并且并行執(zhí)行

3. 快照測(cè)試：Jest能夠?qū)eact 樹進(jìn)行快照或別的序列化數(shù)值快速編寫測(cè)試，提供快速更新的用戶體驗(yàn)。

4. 支持異步代碼測(cè)試：支持promises和async/await

5. 自動(dòng)生成靜態(tài)分析結(jié)果：不僅顯示測(cè)試用例執(zhí)行結(jié)果，也顯示語句、分支、函數(shù)等覆蓋率。

為什么要使用單元測(cè)試工具

我們?cè)陂_發(fā)過程中，不使用測(cè)試工具依然可以自己寫代碼進(jìn)行單元測(cè)試，但是我們的代碼存在著相互調(diào)用關(guān)系，在測(cè)試過程中我們又希望使單元相對(duì)獨(dú)立而又能正常運(yùn)行，就需要我們對(duì)被測(cè)函數(shù)的依賴函數(shù)和環(huán)境進(jìn)行mock，并且在測(cè)試數(shù)據(jù)輸入、測(cè)試執(zhí)行和測(cè)試結(jié)果檢查方面存在很多相似性，測(cè)試工具正是為我們?cè)谶@些方面提供了方便。

準(zhǔn)備階段

需要一個(gè)rn項(xiàng)目，這里演示的是我個(gè)人的項(xiàng)目ReactNative-ReduxSaga-TODO

安裝jest

如果你是用react-native init命令行創(chuàng)建的rn項(xiàng)目，并且你的rn版本在0.38以上，則無需安裝了。不太清楚的話就看一下

package.json文件中是否包含以下代碼：

 // package.json
 "scripts": {
  "test": "jest"
 },
 "jest": {
  "preset": "react-native"
 }

如果沒有就安裝一下npm i jest --save-dev，并把上述代碼添加到package.json文件的對(duì)應(yīng)位置。

以上步驟完成后，簡(jiǎn)單運(yùn)行npm run test測(cè)試一下jest是否配置成功。但我們沒有寫測(cè)試用例，終端會(huì)打印no tests found。這時(shí)就配置完成了。

快照測(cè)試

寫一個(gè)組件

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;

在項(xiàng)目根目錄下找到__test__文件夾，現(xiàn)在，讓我們使用React的測(cè)試渲染器和Jest的快照功能來與組件進(jìn)行交互，并捕獲呈現(xiàn)的輸出并創(chuàng)建一個(gè)快照文件。

// 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();
});

然后在終端運(yùn)行npm run test或jest。將會(huì)輸出：

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.

同時(shí)，在test文件夾下會(huì)輸出一個(gè)文件，即為生成的快照。

// 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>
`;

修改源文件

在下一次運(yùn)行測(cè)試的時(shí)候，呈現(xiàn)的輸出將與之前創(chuàng)建的快照進(jìn)行比較?？煺諔?yīng)該和代碼一起提交。當(dāng)快照測(cè)試失敗的時(shí)候，就需要檢查是否有意或無意的更改。如果是和預(yù)期中的變化一樣，調(diào)用jest -u來覆蓋當(dāng)前的快照。

我們來更改一下原來的代碼：把第二行<Text>的字號(hào)改為14.

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

這時(shí)，我們?cè)龠\(yùn)行jest。這時(shí)終端將會(huì)拋出錯(cuò)誤，并指出了錯(cuò)誤位置

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎樣在項(xiàng)目中使用jest測(cè)試react native組件”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：怎樣在項(xiàng)目中使用jest測(cè)試reactnative組件-創(chuàng)新互聯(lián)
分享地址：http://chinadenli.net/article4/epeoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、面包屑導(dǎo)航、網(wǎng)頁設(shè)計(jì)公司、企業(yè)建站、企業(yè)網(wǎng)站制作、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)