React 測試利器之 Enzyme

2021-10-02 14:38:07 字數 2725 閱讀 3784

react測試利器enzyme有三種渲染方式:shallow, mount, render。shallow渲染叫淺渲染,僅僅對當前jsx結構內的頂級元件進行渲染,而不對這些元件的內部子元件進行渲染,因此,它的效能上最快的,大部分情況下,如果不深入元件內部測試,那麼可以使用shallow渲染。mount則會進行完整渲染,而且完全依賴dom api,也就是說mount渲染的結果和瀏覽器渲染結果說一樣的,結合jsdom這個工具,可以對上面提到的有內部子元件實現複雜互動功能的元件進行測試。render也會進行完整渲染,但不依賴dom api,而是渲染成html結構,並利用cheerio實現html節點的選擇,它相當於只呼叫了元件的render方法,得到jsx並轉碼為html,所以元件的生命週期方法內的邏輯都測試不到,所以render常常只用來測試一些資料(結構)一致性對比的場景。在這裡還提到,shallow實際上也測試不到componentdidmount/componentdidupdate這兩個方法內的邏輯。

shallow

shallow rendering(淺渲染)指的是,將乙個元件渲染成虛擬dom物件,但是只渲染第一層,不渲染所有子元件(即忽略父元件內的所有子元件),所以處理速度非常快。它不需要dom環境,因為根本沒有載入進dom(可以理解為虛擬dom)。

shallow的函式輸入元件,返回元件的淺渲染結果,而返回的結果可以用類似jquery的形式獲取元件的資訊。

例項請至 react 之 jest 前端自動化測試 的 ui 測試部分例項

常用api:

mount

mount方法用於將react元件載入為真實dom節點,所以可以測試子元件。然而真實dom需要乙個瀏覽器環境,為了解決這個問題,我們可以用到jsdom(依賴乙個用jsdom模擬的瀏覽器環境).

也就是說我們可以用jsdom模擬乙個瀏覽器環境去載入真實的dom節點。

// demo code

// src/initglobal.js

import jsdom from 'jsdom';

const = jsdom;

if (typeof document === 'undefined')

// __tests__/initglobal.test.js

import react from 'react'

import enzyme from 'enzyme'

import adapter from 'enzyme-adapter-react-16'

import example from '../src/initglobal'

const =enzyme

enzyme.configure()

describe('enzyme mount', function () );

});/*

常用你api:

.get(index):返回指定位置的子元件的dom節點

.at(index):返回指定位置的子元件

.text():返回當前元件的文字內容

.html():返回當前元件的html**形式

.props():返回根元件的所有屬性

.prop(key):返回根元件的指定屬性

.state([key]):返回根元件的狀態

*/

render

render靜態渲染,主要用於將react元件渲染成靜態的html字串,然後使用cheerio這個庫解析這段字串,並返回乙個cheerio的例項物件,可以用來分析元件的html結構。

// demo render

import react from 'react'

import enzyme from 'enzyme'

import adapter from 'enzyme-adapter-react-16'

import example from '../enzyme'

const =enzyme

enzyme.configure()

describe('enzyme render test', function () `)

console.info(`查詢到span的個數:$`)

buttonobj.text(),spanobj.text()

})})

三種渲染方式對比

describe('shallow vs render vs mount', function () 

})it('測試render500次', () =>

})it('測試mount500次', () =>

})})

通過執行上例測試輸出的結果為:

測試 shallow 500次 (116ms)=> render 500次 (421ms) => mount 500次 (984s)

渲染方法

是否可以測試子元件

是否可以模擬互動

效能(測試500次)

shallow否是

116ms

mount是是

421ms

render是否

984ms

enzyme github 傳送門

單元測試利器之Jtester

名詞解釋 什麼是jtester?jtester是站在眾多巨人肩膀上的單元測試框架,整合了junit4.5,dbunit2.4.3,unitils2.2,jmock2.5和testng5.1這些優秀的開源框架,並在這些框架上做了擴充套件,使得單元測試更加方便和強大。jtester帶給了我們什麼?1 在...

python 利器 python利器之切片

切片 切片的語法表示式為 start index end index step 其中 start index表示起始索引 end index表示結束索引 step表示步長,步長不能為0,且預設值為1 切片操作是指按照步長,擷取從起始索引到結束索引,但不包含結束索引 也就是結束索引減1 的所有元素。p...

Python 介面測試利器jsonpath使用

在使用python requests pytest allure 的框架中,jsonpath 起至關重要的作用 簡單的說,jsonpath 是用於提取介面資料響應為json格式的值 舉例說明 某個介面資料返回格式如下 rsp query 170085 1.取code的值,可以使用絕對路徑或者使用相對...