這次帶給大家jest測試react native組件的步奏是什麼，jest測試react native組件的注意事項有哪些，下面就是實戰案例，一起來看一下。
目前Javascript的測試工具很多，但針對React的測試策略，Facebook推出的ReactJs標配測試工具是Jest.Jest的官網位址：https://facebook.github.io/jest/。我們可以看到Jest官網宣稱的是：Painless JavaScript Testing。是Facebook用於測試服務和React應用程式的JavaScript單元測試框架。
所謂單元測試也就是對每個單元進行測試，通俗的將一般針對的是函數，類別或單一元件，不涉及系統和整合。單元測試是軟體測試的基礎測試。 Jest主要有以下特點：
適應性：Jest是模組化、可擴充、可設定的。
沙箱與快速：Jest虛擬化了JavaScript的環境，能模擬瀏覽器，並且並行執行
快照測試：Jest能夠對React 樹進行快照或別的序列化數值快速編寫測試，提供快速更新的使用者體驗。
支援非同步程式碼測試：支援promises和async/await
#自動產生靜態分析結果：不僅顯示測試案例執行結果，也顯示語句、分支、函數等覆蓋率。
為什麼要使用單元測試工具
我們在開發過程中，不使用測試工具還是可以自己寫程式碼進行單元測試，但是我們的程式碼存在著相互呼叫關係，在測試過程中我們又希望使單元相對獨立而又能正常運行，就需要我們對被測函數的依賴函數和環境進行mock，並且在測試資料輸入、測試執行和測試結果檢查方面有許多相似性，測試工具正是為我們在這些方面提供了方便。
準備階段
需要一個rn項目，這裡示範的是我個人的專案ReactNative-ReduxSaga-TODO
安裝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是否配置成功。但我們沒有寫測試用例，終端機會印出no tests found。這時就配置完成了。
快照測試
寫一個元件
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資料夾，現在，讓我們使用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 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# 191919191919198191919990919990919909199201990011990201990200007007130700700073073073003073 月 2 sRan all test suites.
同時，在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>
`;登入後複製
修改原始檔案
在下次執行測試的時候，呈現的輸出將與先前建立的快照進行比較。快照應該和程式碼一起提交。當快照測試失敗的時候，就需要檢查是否有意或無意的更改。如果是和預期中的變化一樣，請呼叫jest -u來覆蓋目前的快照。 我們來更改原來的程式碼：把第二行的字號改為14.
<Text style={{ fontSize: 14, color }}>{text}</Text>登入後複製
這時，我們再執行jest。這時終端將會拋出錯誤，並指出了錯誤位置
因為這段程式碼是我們有意改的，這時運行jest -u，快照被覆蓋。再執行jest則不會報錯了~
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
JS文字間歇循環滾動效果怎麼實現
JS新增元素新節點
以上是jest測試react native元件的步奏是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
