概述

所謂單元測試，就是對每個單元進行的測試，一般針對的是函式、類或單個元件，不涉及系統和整合，單元測試是軟體測試的基礎測試，一個完備的軟體系統都會涉及到單元測試。

目前，Javascript的測試工具很多，但是針對React的測試主要使用的是Facebook推出的Jest框架，Jest是基於Jasmine的JavaScript測試框架，具有上手容易、快速、可靠的特點，是React.js預設的單元測試框架。相比其他的測試框架，Jest具有如下的一些特點：

• 適應性：Jest是模組化、可擴充套件和可配置的；
• 沙箱和快速：Jest虛擬化了JavaScript的環境，能模擬瀏覽器，並且並行執行；
• 快照測試：Jest能夠對React 樹進行快照或別的序列化數值快速編寫測試，提供快速更新的使用者體驗；
• 支援非同步程式碼測試：支援promises和async/await；
• 自動生成靜態分析結果：不僅顯示測試用例執行結果，也顯示語句、分支、函式等覆蓋率。

環境搭建

安裝Jest

首先，在專案目錄下使用下面的命令安裝Jest。

npm install --save-dev jest
//或者
yarn add --dev jest

如果你使用的是react-native init命令列方式來建立的RN專案，且RN版本在0.38以上，則無需手動安裝，系統在生成專案的時候會自動新增依賴。

"scripts": {
 "test": "jest"
},
"jest": {
 "preset": "react-native"
}
 

配置Babel

現在很多的專案都使用es6及以上版本編寫，為了相容老版本，我們可以使用Babel來將es5的語法轉換為es6。使用Babel前，我們需要使用如下的命令來安裝Babel。

yarn add --dev babel-jest babel-core regenerator-runtime

說明：如果使用的是Babel 的version 7則需要安裝babel-jest, [email protected]^7.0.0-bridge.0 和 @babel/core，安全命令如下:

yarn add --dev babel-jest [email protected]^7.0.0-bridge.0 @babel/core regenerator-runtime
 

然後在專案的根目錄裡新增 .babelrc 檔案，在檔案中配置如下react-native指令碼內容。

{
  "presets": ["react-native"],
  "sourceMaps":true  // 用於對齊堆疊，精準的定位單元測試中的問題
}

如果是自動生成的， .babelrc 檔案的配置指令碼如下：

{
  "presets": ["module:metro-react-native-babel-preset"]
}

此時，需要將上面的presets配置修改為 “presets”: [“react-native”]。

完整配置

為了方便檢視， 下面是package.json檔案的完整配置：

{
  "name": "jestTest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react-native": "0.55.4",
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-jest": "^23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.3",
    "react-test-renderer": "16.5.0",
    "regenerator-runtime": "^0.12.1"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native)/)"
    ]
  }
}

說明：如果報AccessibilityInfo錯誤，請注意react-naitve的版本號，因為react-naitve的版本和其他庫存在一些相容問題，請使用0.55.4及以下穩定版本。

Cannot find module 'AccessibilityInfo' (While processing preset: "/Users/xiangzhihong029/Documents/rn/jestTest/node_modules/react-native/Libraries/react-native/react-native-implementation.js")

Jest單元測試

簡單示例

首先，我們在專案的根目錄新建一個名為__test__的資料夾，然後編寫一個元件，例如：

import React, {Component} from 'react';
import {
    Text, View,
} from 'react-native';

export default class JestTest extends Component{
    render() {
        return(<View />)
    }
}

然後，我們在__test__資料夾下編寫一個名為jest.test.js的檔案，程式碼如下：

import React from 'react';
import JestTest from '../src/JestTest';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
    const tree = renderer.create(<JestTest/>).toJSON();
    expect(tree).toMatchSnapshot();
});

使用命令 “yarn jest” ，系統會幫我們生成一個快照測試檔案。快照測試是第一次執行的時候在不同情況下的渲染結果（掛載前）儲存的一份快照檔案，後面每次再執行快照測試時，都會和第一次的比較，除非使用“npm test – -u”命令重新生成快照檔案。下面是使用“yarn jest”命令生成測試檔案的效果圖： 當然，上面的例子並沒有涉及到任何的業務邏輯，只是介紹了下在React Native中如何使用Jest進行單元測試。

E2E自動化測試