Mocha-Chai抛出“导航器未定义".由于React-router组件 [英] Mocha-Chai throws "navigator not defined" due to React-router component
问题描述
我正在为使用react-router的React组件编写测试.我在Chai和Chai-jQuery中使用Mocha.
I am writing a test for a React component that uses react-router. I am using Mocha with Chai and Chai-jQuery.
我的测试工作正常，直到我将组件从react-router导入组件(例如Link).此时，出现以下错误:
My tests work fine, until I import a component from react-router into a component (e.g. Link). At this point, I get the following error:
ReferenceError: navigator is not defined
at Object.supportsHistory (/Users/nico/google-drive/code/agathos/client/node_modules/history/lib/DOMUtils.js:61:12)
在更新到react-bootstrap v0.29.3之前，我曾经在react-bootstrap上遇到类似的错误.我拥有最新版本的react-router v2.4.0(和历史记录v2.1.1).但是问题仍然存在.
I used to get a similar error with react-bootstrap until I updated to react-bootstrap v0.29.3. I have the most recent version of react-router v2.4.0 (and history v2.1.1). But the problem persists.
我发现的唯一解决方案是将node_modules/history/lib/DOMUtils:navigator更改为window.navigator.但是，这是一个hack，不是一个好的解决方案.
The only solution I have found is to change node_modules/history/lib/DOMUtils: navigator into window.navigator. This is a hack though, and not a good solution.
我认为问题出在react-router，但是我没有解决方案.
I think the problem is with react-router, but I don't have a solution.
以防万一，这是我的test-helper.js.
import jquery from 'jquery';
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import jsdom from 'jsdom';
import chai, { expect } from 'chai';
import chaiJquery from 'chai-jquery';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
// set up a testing environment to run like a browser in the command line
// create a fake browser and html doc
global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = global.document.defaultView;
// prevent jquery defaulting to the dom by giving it access to the global.window
const $ = jquery(window);
// build renderComponent function that should render a React class
function renderComponent(ComponentClass, props = {}, appState = {}) {
const componentInstance = TestUtils.renderIntoDocument(
<Provider store={createStore(reducers, appState)}>
<ComponentClass {...props} />
</Provider>
);
// produces html
return $(ReactDOM.findDOMNode(componentInstance));
}
//build a helper for simulating events
// $.fn allows you to add a custom function to your jquery library
$.fn.simulate = function(eventName, value) {
if (value) {
// `this` allows you to access the object appended to
// `val()` is a jquery function that sets the value of selected html element
this.val(value);
}
// the [] are object method selectors, which allow you to access e.g. Simulate.change
TestUtils.Simulate[eventName](this[0]);
};
// set up chai jquery
chaiJquery(chai, chai.util, $);
export {renderComponent, expect};
推荐答案
似乎react-router假定navigator在全局范围内.
It seems that react-router assumes navigator is in the global scope.
要解决此错误，应在测试设置阶段将navigator添加到全局范围:
To resolve this error, you should add navigator to the global scope in your test setup phase:
global.navigator = {
userAgent: 'node.js'
};
这篇关于Mocha-Chai抛出“导航器未定义".由于React-router组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
