一、組件化與UI測試

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

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

[[186101]]

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

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

[[186102]]

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

二、React組件樹的測試

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

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

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

三、使用Enzyme簡化測試代碼

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

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

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

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

四、Enzyme的三種渲染方法

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

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

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

完全的DOM渲染需要在全局范圍內(nèi)提供完整的DOM API，這也就意味著它必須在至少“看起來像”瀏覽器環(huán)境的環(huán)境中運(yùn)行，如果不想在瀏覽器中運(yùn)行測試，推薦使用mount的方法是依賴于一個(gè)名為jsdom的庫，它本質(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方法則會將React組件渲染成靜態(tài)的HTML字符串，返回的是一個(gè)Cheerio實(shí)例對象，采用的是一個(gè)第三方的HTML解析庫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")