一、組件化與UI測(cè)試

在組件化出現(xiàn)之前，我們不談UI的單元測(cè)試，哪怕是對(duì)于UI頁(yè)面進(jìn)行測(cè)試都是一件非常困難的事情。其實(shí)組件化并不完全是為了復(fù)用，很多情況下也恰恰是為了分治，使得我們可以分組件對(duì)UI頁(yè)面進(jìn)行開(kāi)發(fā)，然后分別對(duì)其進(jìn)行單元測(cè)試。

特別是當(dāng)瀏覽器中的Web應(yīng)用越來(lái)越龐大的時(shí)候，與在后端將大型單體應(yīng)用拆分成微服務(wù)架構(gòu)的***實(shí)踐一樣，前端應(yīng)用也可以被拆分成不同的頁(yè)面和特性。

[[186101]]

每個(gè)特性由一個(gè)單獨(dú)的團(tuán)隊(duì)從端到端對(duì)其負(fù)責(zé)，它允許團(tuán)隊(duì)規(guī)模化地交付那些能夠獨(dú)立部署和維護(hù)的服務(wù)，在2016年11月期的技術(shù)雷達(dá)當(dāng)中這種方式被稱之為微前端，微前端的目標(biāo)就是允許Web應(yīng)用的特性彼此獨(dú)立，每個(gè)特性可以獨(dú)立地開(kāi)發(fā)、測(cè)試和部署。

雖說(shuō)組件化不是React***提出來(lái)的，但卻是被React在前端世界里發(fā)揚(yáng)光大的，而現(xiàn)在幾乎所有的所謂現(xiàn)代化UI框架比如Angular或者Vue都已經(jīng)將組件化作為框架的立足之本。

[[186102]]

React已經(jīng)讓UI測(cè)試變得容易很多，React組件都可以被簡(jiǎn)化為這樣一個(gè)表達(dá)式，即UI=f(data)，這個(gè)純函數(shù)返回的只是一個(gè)描述UI組件應(yīng)該是什么樣子的虛擬DOM，本質(zhì)上就是一個(gè)樹(shù)形的數(shù)據(jù)結(jié)構(gòu)。給這個(gè)純函數(shù)輸入一些應(yīng)用程序的狀態(tài)，就會(huì)得到相應(yīng)的UI描述的輸出，這個(gè)過(guò)程不會(huì)去直接操作實(shí)際的UI元素，也不會(huì)產(chǎn)生所謂的副作用。

二、React組件樹(shù)的測(cè)試

按理來(lái)說(shuō)按照純函數(shù)這樣的思路，React組件的測(cè)試應(yīng)該很簡(jiǎn)單。但與此同時(shí)，對(duì)于(渲染出UI的)組件樹(shù)進(jìn)行測(cè)試依然存在一個(gè)問(wèn)題，從下圖中可以看出，越處于上層的組件，其復(fù)雜度越高。

對(duì)于***層的子組件來(lái)說(shuō)，我們可以很容易的將其進(jìn)行渲染并測(cè)試其邏輯正確與否，但對(duì)于較上層的父組件來(lái)說(shuō)，就需要對(duì)其所包含的所有子組件都進(jìn)行預(yù)先渲染，甚至于最上面的組件需要渲染出整個(gè) UI 頁(yè)面的真實(shí)DOM節(jié)點(diǎn)才能對(duì)其進(jìn)行測(cè)試，這顯然是不可取的。

淺渲染(Shallow Rendering)解決了這個(gè)問(wèn)題，也就是說(shuō)在我們針對(duì)某個(gè)上層組件進(jìn)行測(cè)試時(shí)，可以不用渲染它的子組件，所以就不用再擔(dān)心子組件的表現(xiàn)和行為，這樣就可以只對(duì)特定組件的邏輯及其渲染輸出進(jìn)行測(cè)試了。Facebook官方提供了react-addons-test-utils可以讓我們使用淺渲染這個(gè)特性，用于測(cè)試虛擬DOM對(duì)象，即React.Component的實(shí)例。

三、使用Enzyme簡(jiǎn)化測(cè)試代碼

我們常常會(huì)提到，測(cè)試代碼對(duì)于復(fù)雜代碼庫(kù)的可維護(hù)性至關(guān)重要，但是測(cè)試代碼本身的易于理解和編寫(xiě)，以及可讀性和可維護(hù)性也同等重要。

而Enzyme則來(lái)自于活躍在JavaScript開(kāi)源社區(qū)的Airbnb公司，是對(duì)官方測(cè)試工具庫(kù)(react-addons-test-utils)的封裝，它模擬了jQuery的API，非常直觀并且易于使用和學(xué)習(xí)，提供了一些與眾不同的接口和方法來(lái)減少測(cè)試的樣板代碼，方便你判斷、操縱和遍歷React Components的輸出，并且減少了測(cè)試代碼和實(shí)現(xiàn)代碼之間的耦合。

Enzyme理論上應(yīng)該與所有TestRunner和斷言庫(kù)相兼容，已經(jīng)集成了多種測(cè)試類庫(kù)，比如Jest、Mocha&Chai、Jasmine，不過(guò)這些不是我們今天的重點(diǎn)。

對(duì)比一下兩者facebook/react-addons-test-utils vs airbnb/enzyme的API就一目了然，立見(jiàn)分明：

四、Enzyme的三種渲染方法

1. shallow(node[, options]) => ShallowWrapper

shallow方法就是對(duì)官方的Shallow Rendering的封裝，淺渲染在將一個(gè)組件作為一個(gè)單元進(jìn)行測(cè)試的時(shí)候非常有用，可以確保你的測(cè)試不會(huì)去間接斷言子組件的行為。shallow方法只會(huì)渲染出組件的***層DOM結(jié)構(gòu)，其嵌套的子組件不會(huì)被渲染出來(lái)，從而使得渲染的效率更高，單元測(cè)試的速度也會(huì)更快。

import { shallow } from 'enzyme' 
describe('Enzyme Shallow', () => { 
  it('App should have three <Todo /> components', () => { 
   const app = shallow(<App />) 
   expect(app.find('Todo')).to.have.length(3) 
  }) 
} 

2. mount(node[, options]) => ReactWrapper

mount方法則會(huì)將React組件渲染為真實(shí)的DOM節(jié)點(diǎn)，特別是在你依賴真實(shí)的DOM結(jié)構(gòu)必須存在的情況下，比如說(shuō)按鈕的點(diǎn)擊事件。

完全的DOM渲染需要在全局范圍內(nèi)提供完整的DOM API，這也就意味著它必須在至少“看起來(lái)像”瀏覽器環(huán)境的環(huán)境中運(yùn)行，如果不想在瀏覽器中運(yùn)行測(cè)試，推薦使用mount的方法是依賴于一個(gè)名為jsdom的庫(kù)，它本質(zhì)上是一個(gè)完全在JavaScript中實(shí)現(xiàn)的headless瀏覽器。

import { mount } from 'enzyme' 
describe('Enzyme Mount', () => { 
  it('should delete Todo when click button', () => { 
   const app = mount(<App />) 
   const todoLength = app.find('li').length 
   app.find('button.delete').at(0).simulate('click') 
   expect(app.find('li').length).to.equal(todoLength - 1) 
  }) 
}) 

3. render(node[, options]) => CheerioWrapper

render方法則會(huì)將React組件渲染成靜態(tài)的HTML字符串，返回的是一個(gè)Cheerio實(shí)例對(duì)象，采用的是一個(gè)第三方的HTML解析庫(kù)Cheerio，官方的解釋是「我們相信Cheerio可以非常好地處理HTML的解析和遍歷，再重復(fù)造輪子只能算是一種損失」。

import { render } from 'enzyme' 
describe('Enzyme Render', () => { 
  it('Todo item should not have todo-done class', () => { 
   const app = render(<App />) 
   expect(app.find('.todo-done').length).to.equal(0) 
   expect(app.contains(<div className="todo" />)).to.equal(true) 
  }) 
}) 

/* CSS Selector */ 
wrapper.find('.foo') //class syntax 
wrapper.find('input') //tag syntax 
wrapper.find('#foo') //id syntax 
wrapper.find('[htmlFor="foo"]') //prop syntax 

/* Component Constructor */ 
wrapper.find(ChildrenComponent) 
myComponent.displayName = 'ChildrenComponent' 
wrapper.find('ChildrenComponent') 
/* Object Property Selector */ 
const wrapper = mount( 
  <div> 
   <span foo={3} bar={false} title="baz" /> 
  </div> 
) 
wrapper.find({ foo: 3 }) 
wrapper.find({ bar: false }) 
wrapper.find({ title: 'baz'}) 

it('simulates click events', () => {  
  const onButtonClick = sinon.spy() 
  const wrapper = shallow( 
   <Foo onButtonClick={onButtonClick} /> 
  ) 
  wrapper.find('button').simulate('click') 
  expect(onButtonClick.calledOnce).to.be.true 
}) 

const mockComponent = (type) => { 
  return React.createClass({ 
   displayName: type, 
   propTypes: { 
     children: React.PropTypes.node 
   }, 
   render() { 
     return <div {...this.props}>{this.props.children}</div> 
   } 
  }) 
} 
RN.View = mockComponent("View") 
RN.Text = mockComponent("Text") 
RN.Image = mockComponent("Image")