如果你很懶，那你更應該寫測試：jest

什麼是測試呢？其實就是用程式碼去幫你自動檢測一些狀況會不會碰到錯誤。寫測試在現今是一件很重要的事情，但其實很多人（包含我），其實都不喜歡寫測試。為什麼呢？可能覺得不知道要寫什麼，或者是覺得自己手動測一測就好了，幹嘛寫測試。

但我前一陣子有改觀，發現測試的重要性。有了測試你至於能保證程式是完好的，至少能保證不發生一些低級的錯誤，確保最基本的品質。不過我也是最近才開始寫一點測試的，所以對這一塊也不太了解，只能稍微講一點點而已。

如果想學更深入的，還是得要靠自己去網路上搜尋資源。

我們用的那一套 create-react-app，裡面就已經幫我們裝好jest這一個測試框架了，你直接下npm run test，就可以看到測試跑起來。

一般來說，都會在src這個資料夾底下再開一個__tests__的資料夾，裡面放的是所有的測試程式碼，畢竟集中在一個地方會比較好管理。我們今天就來測試看看我們上一章寫的 reducers.js 這個檔案：

import { combineReducers } from 'redux'
import { SET_POSTS, REMOVE_POST } from './actions'

// 設定預設 state
const defaultState = {
  posts: []
}

// 底下每一個就是一個 reducer
// 記得 export，測試那邊才引用得到
export function posts(state = defaultState, action) {
  switch (action.type) {

    // 回傳設定好 posts 的 state
    case SET_POSTS:
      return {
        ...state,
        posts: action.posts
      }

    // 回傳刪除後的 state
    case REMOVE_POST:
      return {
        ...state,
        posts: state.posts.filter((post) => post._id !== action.id)
      }
    default:
      return state
  }
}

const App = combineReducers({
  posts
})

export default App

新增一個 recuers.test.js，記得要放在__tests__底下。

import {posts as reducer} from '../reducers';
import {SET_POSTS, REMOVE_POST} from '../actions';

const defaultState = {
  posts: []
}

describe('Reducer', () => {

  // 應該要回傳初始狀態
  it('should return the initial state', () => {
    expect(
      reducer(undefined, {})
    ).toEqual(defaultState);
  });

  // 回傳的狀態應該要把 posts 設定好
  it('should set posts', () => {
    const posts = [1,2,3];
    expect(
      reducer(defaultState, {
        type: SET_POSTS,
        posts
      })
    ).toEqual({
      posts: [1, 2, 3]
    });
  });

  // 回傳的狀態，id 是 1 的文章應該會被刪除
  it('should remove post', () => {
    expect(
      reducer({
        posts: [{_id: 1}, {_id: 2}, {_id: 3}]
      }, {
        type: REMOVE_POST,
        id: 1
      })
    ).toEqual({
      posts: [{_id: 2}, {_id: 3}]
    });
  });
});

執行npm run test之後，就可以看見測試開始跑了，最後會跟你講結果：

 PASS  src/App.test.js
 PASS  src/__tests__/reducers.js

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        3.643s
Ran all test suites.

Watch Usage
 › Press p to filter by a filename regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

除了 jest 的這種測試以外，還有另外一種是直接模擬瀏覽器的行為來做測試。例如說他可以寫一個腳本去點某個按鈕，檢查是不是有出現某一段文字。在 js 裡面比較常用的叫做Nightwatch.js。如果想瞭解更多的，可以參考這一篇：react 測試 使用nightwatch。