一、組件化與UI測試

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

特別是當瀏覽器中的Web應用越來越龐大的時候，與在后端將大型單體應用拆分成微服務架構的***實踐一樣，前端應用也可以被拆分成不同的頁面和特性。

[[186101]]

每個特性由一個單獨的團隊從端到端對其負責，它允許團隊規(guī)?；亟桓赌切┠軌颡毩⒉渴鸷途S護的服務，在2016年11月期的技術雷達當中這種方式被稱之為微前端，微前端的目標就是允許Web應用的特性彼此獨立，每個特性可以獨立地開發(fā)、測試和部署。

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

[[186102]]

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

二、React組件樹的測試

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

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

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

三、使用Enzyme簡化測試代碼

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

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

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

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

四、Enzyme的三種渲染方法

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

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

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組件渲染為真實的DOM節(jié)點，特別是在你依賴真實的DOM結構必須存在的情況下，比如說按鈕的點擊事件。

完全的DOM渲染需要在全局范圍內(nèi)提供完整的DOM API，這也就意味著它必須在至少“看起來像”瀏覽器環(huán)境的環(huán)境中運行，如果不想在瀏覽器中運行測試，推薦使用mount的方法是依賴于一個名為jsdom的庫，它本質(zhì)上是一個完全在JavaScript中實現(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字符串，返回的是一個Cheerio實例對象，采用的是一個第三方的HTML解析庫Cheerio，官方的解釋是「我們相信Cheerio可以非常好地處理HTML的解析和遍歷，再重復造輪子只能算是一種損失」。

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")