詳解講解使用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主要有以下特點：

1. 適應性：Jest是模組化、可擴充、可設定的。

2. 沙箱與快速：Jest虛擬化了JavaScript的環境，能模擬瀏覽器，並且並行執行

3. 快照測試：Jest能夠對React 樹進行快照或別的序列化數值快速編寫測試，提供快速更新的使用者體驗。

4. 支援非同步程式碼測試：支援promises和async/await

5. #自動產生靜態分析結果：不僅顯示測試案例執行結果，也顯示語句、分支、函數等覆蓋率。

為什麼要使用單元測試工具

我們在開發過程中，不使用測試工具還是可以自己寫程式碼進行單元測試，但是我們的程式碼存在著相互呼叫關係，在測試過程中我們又希望使單元相對獨立而又能正常運行，就需要我們對被測函數的依賴函數和環境進行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: &#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 '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 ›
 › 1# snapshot written in 1 test suite.

Test Suites: 1 passed, 1 total

Tests:       1 passed, 1 total
Snapshots:   1 added, 1 到#1: #Ran 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來覆蓋目前的快照。

我們來更改原來的程式碼：把第二行7afbc23223af17d69e2ad2a4e42c6248的字號改為14.

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

這時，我們再執行jest。這時終端將會拋出錯誤，並指出了錯誤位置

因為這段程式碼是我們有意改的，這時運行jest -u，快照被覆蓋。再執行jest則不會報錯了~

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在vue-prop中使用父元件向子元件進行傳值如何實作

在Node.js中使用cheerio製作簡單的網頁爬蟲（詳細教學）

在vue中如何實作父元件向子元件傳遞多個資料

#

以上是詳解講解使用jest測試react native組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！