Question

我正在为使用browserHistory的组件编写测试规范。它抛出一个错误 ReferenceError：未定义导航器

我尝试了来自Mocha-Chai throws "navigator not defined" due to React-router component的解决方案，但它仍然无效。可能是我无法以正确的方式使用解决方案。

这是我的spec文件。

import React from 'react';
import { expect } from 'chai';
import jsdom from 'jsdom';
import sinon from 'sinon';
import shallow from 'enzyme';
import { MyComponent } from 'component.jsx';

const doc = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.document = doc;
global.window = doc.defaultView;
global.navigator = {
  userAgent: 'node.js',
};

describe('<Component />', () => {
  let wrapper;

  before(() => {
    sinon.stub(Component.prototype, 'componentWillMount');
    wrapper = shallow(<Component />);
  });

  context('Component', () => {
    it('should render component', () => {
      expect(wrapper.type()).to.equal('div');
    });
  });

  after(() => {
    Component.prototype.componentWillMount.restore();
  });
});

任何帮助将不胜感激。谢谢。

这是component.jsx文件

import React, { Component, PropTypes } from 'react';
import R from 'ramda';
import { browserHistory } from 'react-router';

export class MyComponent extends Component {
  componentWillMount() {
    const query = this.props.location.query;
    // looping through the query object of url
    R.mapObjIndexed((value, key) => this.prepareStateData(value, key), query);
  }

  componentDidUpdate(prevProps) {
    // this push the url every time the component is updated
    if (this.props.urlHistory && this.props.urlHistory !== prevProps.urlHistory) {
      browserHistory.push(this.props.urlHistory);
    }
  }

  prepareStateData(value, key) {
    // this changes the state according to the url 
    switch (key) {
      case 'query1': {
          // do something
        break;
      }
      case 'query2': {
          // do something
        break;
      }
      default:
         // do something
        break;
    }
  }

  render() {
    return (
      <div>
       { /* render part */ }
      </div>
    );
  }
}

MyComponent.propTypes = {
  location: PropTypes.object,
  urlHistory: PropTypes.string,
};

Answer 1

您的测试运行员对您的应用应该运行的环境一无所知，因此无法使用window.navigator / window.location等。

您正在使用的

browserHistory要求浏览器环境正常工作，我认为这是您面临的问题。尝试将导入的browserHistory替换为createMemoryHistory，然后查看测试是否通过。

显示差异的docs摘录：

browserHistory在可用时使用HTML5历史记录API，否则将回退到完全刷新。 browserHistory需要在服务器端进行其他配置以提供URL，但它是现代网页的首选解决方案。

createMemoryHistory创建一个不与浏览器URL交互的内存中历史记录对象。当您需要自定义用于服务器端呈现的历史对象，自动化测试，或者当您不想操作浏览器URL时（例如，当您的应用程序嵌入到应用程序中时）时，这非常有用。

测试React-router组件抛出导航器未定义

1 个答案: