轉載

React 16 + Jest單元測試 之 Mock Functions(Mock Names 和 Custom Matchers)

項目初始化【這裡使用之前的項目，節省時間】

項目初始化位址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.22           

拉取

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git 
cd webpack4-react16-reactrouter-demo
git fetch origin
git checkout v_1.0.22
npm install            

Mock Names

您可以選擇為mock function提供一個名稱，該名稱将在測試錯誤輸出中顯示，而不是"jest.fn()"。如果您希望能夠快速識别在測試輸出中報告錯誤的mock function，請使用此選項。如下

const myMockFunc = jest
  .fn()
  .mockReturnValue('default')
  .mockImplementation(v => 42 + v)
  .mockName('add42');

test('add 42', () => {
  expect(myMockFunc(1)).toEqual(43);
});           

Custom Matchers

最後，為了簡化斷言如何調用mock函數，Jest提供了一些自定義比對器函數，如下

// mock function至少被調用一次
expect(mockFunc).toBeCalled();

// mock function至少在帶有具體參數的情況下被調用一次
expect(mockFunc).toBeCalledWith(arg1, arg2);

// mock function最後在帶有具體參數的情況下被調用
expect(mockFunc).lastCalledWith(arg1, arg2);

// 所有的調用和mock被作為snapshot寫入到檔案
expect(mockFunc).toMatchSnapshot();           

這些比對器實際上隻是用于檢查.mock屬性的常見形式的糖。

可以自己手動完成此操作，如果想這更符合自己的口味或者需要做一些更具體的事情，比如如下這些

// mock function至少被調用一次
expect(mockFunc.mock.calls.length).toBeGreaterThan(0);

// mock function至少在帶有具體參數的情況下被調用一次
expect(mockFunc.mock.calls).toContain([arg1, arg2]);

// mock function最後在帶有具體參數的情況下被調用
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1]).toEqual([
  arg1,
  arg2,
]);

// mock function被最後一次調用傳入的第一個參數是`42`
expect(mockFunc.mock.calls[mockFunc.mock.calls.length - 1][0]).toBe(42);

// 一個snapshot将會檢查mock在以同樣的參數同樣的次數被調用，它也将在名稱上斷言
expect(mockFunc.mock.calls).toEqual([[arg1, arg2]]);
expect(mockFunc.mock.getMockName()).toBe('a mock name');           

如果想要一個完成的matchers，可以到官網點選

這裡

去檢視

項目實踐位址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag：v_1.0.23