如何在單元測試環境中模擬browserHistory？

Question

我正在嘗試使用react-router的browserHistory來測試React組件。爲了確保獲得browserHistory我使用createMemoryHistory（反應路由器）模塊是這樣的：

let createMemoryHistory = require('react-router/lib/createMemoryHistory'); 

在測試ENV我正在JSDOM庫的優勢。

然後我試圖創造了歷史對象分配給DOM：

let history = createMemoryHistory(); 
global.history = history; 

雖然在測試環境中呈現組件，我收到以下錯誤：

Invariant Violation: Browser history needs a DOM

任何想法如何克服它？

Answer 1

您需要模擬browserHistory對象。您可以使用sinon來創建間諜或存根，以幫助您測試此功能。

例如：

隨着spy

const { createBrowserHistory } = require('history'); 

const history = createBrowserHistory(/* ... */); 

sinon.spy(history, "push"); 

// now you should be able to run assertions on history.push 

assert(history.push.calledOnce) 

更多關於spy和stub

http://sinonjs.org/releases/v4.1.6/spies/

http://sinonjs.org/releases/v4.1.6/stubs/