Jest本身是facebook的js測試框架，和react十分搭配。

官網Jest · ? Painless JavaScript Testing

測試react部分在這裡Testing React Apps · Jest

其中提到了兩種測試react應用的方式，

1. snapshot， 目的是監視DOM渲染後的變化，並不保證組件內部的邏輯一定正確。當你想重構一個組件而不想影響它的行為時可以用這種方式（但是通常情況DOM很容易發生變化）。

2. 直接測試DOM，這時需要引入一個渲染庫：

它能在node環境渲染react 組件:airbnb/enzyme

其中值得說的是它的三種渲染的級別:

1. shallow,只會渲染一層組件，子組件不會繼續渲染，可以取到任意節點的屬性(如果屬性是個方法可以直接調用,配合jest的mock function可以有效的進行測試)，模擬事件等等

（下面兩種我都沒有試，因為單元測試的話應該只會用到shallow方式）2. full，會渲染整個DOM3. static，只保留dom結構，官網說跟cheerio差不多，那就應該是解析成js對象了例子：william-yz/react-practice 這是我之前練習的程序，現在給他加上了單元測試。

其中被測試的幾個組件的覆蓋率都是100%，但是前面用snapshot測試的組件其實裡面都邏輯都是沒有測到的。

另外，在測試container component時，不方便(也不應該)直接測試被react-redux connect後的組件。如果一定要這樣做，你需要構造redux和react-redux的環境給它，比如Provier/reducer/store....，但是這樣已經脫離的UT的範疇。所以應該把原始的組件(被connect前)和mapStateToProps和mapDispatchToProps(如果有的話) export出來，單獨進行測試。

測試原始組件的方式是把它需要的props直接傳進去，包括dispatch。其中的方法比如dispatch用jest.fn()代替，你只用測試這個mock的function接收到的是正確的參數就可以了。
推薦閱讀：

相关文章