【移動應用開發(fā)技術】jest測試react native組件的步驟分析

【移動應用開發(fā)技術】jest測試reactnative組件的步驟分析

這篇文章主要介紹了jest測試reactnative組件的步驟分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。目前Javascript的測試工具很多，但是針對React的測試策略，F(xiàn)acebook推出的ReactJs標配測試工具是Jest.Jest的官網(wǎng)地址：https://facebook.github.io/jest/。我們可以看到Jest官網(wǎng)宣稱的是：PainlessJavaScriptTesting。是Facebook用于測試服務和React應用程序的JavaScript單元測試框架。所謂單元測試也就是對每個單元進行測試，通俗的將一般針對的是函數(shù)，類或單個組件，不涉及系統(tǒng)和集成。單元測試是軟件測試的基礎測試。Jest主要有以下特點：適應性：Jest是模塊化、可擴展和可配置的。沙箱和快速：Jest虛擬化了JavaScript的環(huán)境，能模擬瀏覽器，并且并行執(zhí)行快照測試：Jest能夠?qū)eact樹進行快照或別的序列化數(shù)值快速編寫測試，提供快速更新的用戶體驗。支持異步代碼測試：支持promises和async/await自動生成靜態(tài)分析結(jié)果：不僅顯示測試用例執(zhí)行結(jié)果，也顯示語句、分支、函數(shù)等覆蓋率。為什么要使用單元測試工具我們在開發(fā)過程中，不使用測試工具依然可以自己寫代碼進行單元測試，但是我們的代碼存在著相互調(diào)用關系，在測試過程中我們又希望使單元相對獨立而又能正常運行，就需要我們對被測函數(shù)的依賴函數(shù)和環(huán)境進行mock，并且在測試數(shù)據(jù)輸入、測試執(zhí)行和測試結(jié)果檢查方面存在很多相似性，測試工具正是為我們在這些方面提供了方便。準備階段需要一個rn項目，這里演示的是我個人的項目ReactNative-ReduxSaga-TODO安裝jest如果你是用react-nativeinit命令行創(chuàng)建的rn項目，并且你的rn版本在0.38以上，則無需安裝了。不太清楚的話就看一下package.json文件中是否包含以下代碼：

//

package.json

"scripts":

{

"test":

"jest"

},

"jest":

{

"preset":

"react-native"

}如果沒有就安裝一下npmijest--save-dev，并把上述代碼添加到package.json文件的對應位置。以上步驟完成后，簡單運行npmruntest測試一下jest是否配置成功。但我們沒有寫測試用例，終端會打印notestsfound。這時就配置完成了?？煺諟y試寫一個組件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文件夾，現(xiàn)在，讓我們使用React的測試渲染器和Jest的快照功能來與組件進行交互，并捕獲呈現(xiàn)的輸出并創(chuàng)建一個快照文件。//

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

});然后在終端運行npmruntest或jest。將會輸出：PASS

tests\PostArea_test.js(6.657s)

√renderscorrectly(5553ms)?1snapshotwritten.SnapshotSummary?1snapshotwrittenin1testsuite.TestSuites:1passed,1totalTests:

1passed,1totalSnapshots:

1added,1totalTime:

8.198sRanalltestsuites.PASS

tests\PostArea_test.js(6.657s)

√renderscorrectly(5553ms)?1snapshotwritten.SnapshotSummary?1snapshotwrittenin1testsuite.TestSuites:1passed,1totalTests:

1passed,1totalSnapshots:

1added,1totalTime:

8.198sRanalltestsuites.同時，在test文件夾下會輸出一個文件，即為生成的快照。//

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>

`;修改源文件在下一次運行測試的時候，呈現(xiàn)的輸出將與之前創(chuàng)建的快照進行比較?？煺諔摵痛a一起提交。當快照測試失敗的時候，就需要檢查是否有意或無意的更改。如果是和預期中的變化一樣，調(diào)用jest-u來覆蓋當前的