轉載

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