由于 React-router 组件，Mocha-Chai 抛出 "navigator not defined"

Question

我正在为使用 react-router 的 React 组件编写测试。我正在将 Mocha 与 Chai 和 Chai-jQuery.

一起使用

我的测试工作正常，直到我将组件从 react-router 导入组件（例如 Link）。此时，我收到以下错误：

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（和 history v2.1.1）。但是问题依旧。

我找到的唯一解决方案是将 node_modules/history/lib/DOMUtils: navigator 更改为 window.navigator。不过这是一个 hack，不是一个好的解决方案。

我认为问题出在 react-router 上，但我没有解决方案。

以防万一，这是我的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};

Answer 1

似乎 react-router 假定 navigator 在全局范围内。

要解决此错误，您应该在测试设置阶段将 navigator 添加到全局范围：

global.navigator = {
  userAgent: 'node.js'
};

由于 React-router 组件，Mocha-Chai 抛出 "navigator not defined"

Mocha-Chai throws "navigator not defined" due to React-router component

mocha.js

chai

react-router