如何在单元测试环境中模拟browserHistory？

Question

我正在尝试使用反应路由器的browserHistory来测试React组件.为了确保访问browserHistory我正在使用createMemoryHistory(react-router)模块,如下所示:

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

在测试环境中,我正在利用JSDOM库.

global.document = jsdom('');
global.window = document.defaultView;

然后我试图将创建的历史对象分配给DOM:

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

在测试环境中渲染组件时,我遇到以下错误:

不变违规:浏览器历史记录需要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/