Jest
前言
這章要介紹的也是 Facebook 開源計劃的項目 Jest。Jest 和 Flow 不一樣，是一個單元測試的套件，可以完整的測試 UI、component 和 API 的功能。那麼接下來的兩章，我會大概提到撰寫 unit test 的方式。
架構
首先，我們要來提一下 Jest 這個套件的優點。 Jest 是由 Jasmine 這個框架發展而來的，因此在語法撰寫上，並沒有太大的差異。然而，我認為 Jest 在前端開發上有一個非常 OP 的地方，就是可以把 component snapshot 起來。
snapshot 起來是什麼樣的概念呢？就是類似替 component 照相。那麼如果我有動到 component 的樣式的話，我就可以比對到底哪裡不一樣。
接著我們看專案的 test 結構。
/src
/__mocks__
/components
/__tests__
/__snapshots__
- mocks
mocks 這個資料夾放的是第三方套件的 mock function。所謂的 mock，就是假扮的意思。在寫程式的時候，我們常會援引第三方套件，然後第三方套件可能又援引起他套件。但是這樣引來引去，對測試來說一點都不重要，我們只關係 input 丟進這個套件，ouptput 出來會是什麼而已。這時候就可以在這邊寫上我們的function。
例如 src/__mocks__/react-native-simpledialog-android.js，我們並不關心它到底有沒跑出一個提示字窗，所以我們就直接把它 mock 起來。
var SimpleAlert = {};
SimpleAlert.alert = jest.genMockFunction();
module.exports = SimpleAlert;
- tests
這個資料夾放的是 component 的邏輯 test，最後一行的 toMatchSnapshot()，會去比對 __snapshots__ 資料夾裡的檔案，如果沒有相對應的檔案，那麼就會自動產生一個。
import renderer from 'react-test-renderer'
test('FormButton', () => {
const props = {
isDisabled: false,
onPress: () => {},
buttonText: 'TestString',
}
const tree = renderer.create(<FormButton {...props} />).toJSON()
expect(tree).toMatchSnapshot()
})
- snapshots
這裡放的就是 test 產生出來的 snapshot 檔案喔。如果想要更新的話，只要刪掉，再跑一次 test就好
寫完測試檔案後，只要在 terminal 輸入 npm test 就可以了。那麼會先跑 Jest，跑完之後，再跑下一章我們要講的 mocha。