2016-05-06 10 views
8

के कारण "नेविगेटर परिभाषित नहीं" फेंकता है मैं प्रतिक्रिया-राउटर का उपयोग करने वाले एक प्रतिक्रिया घटक के लिए एक परीक्षण लिख रहा हूं। मैं चाई और चाई-jQuery के साथ मोचा का उपयोग कर रहा हूं।मोचा-चाई प्रतिक्रिया-राउटर घटक

मेरे परीक्षण ठीक काम करते हैं, जब तक कि मैं एक घटक (जैसे लिंक) में प्रतिक्रिया-राउटर से कोई घटक आयात नहीं करता। इस बिंदु पर, मैं निम्नलिखित त्रुटि मिलती है:

ReferenceError: navigator is not defined 
    at Object.supportsHistory (/Users/nico/google-drive/code/agathos/client/node_modules/history/lib/DOMUtils.js:61:12) 

मैं जब तक मैं प्रतिक्रिया-बूटस्ट्रैप v0.29.3 के लिए अद्यतन प्रतिक्रिया-बूटस्ट्रैप के साथ एक समान त्रुटि प्राप्त करने के लिए इस्तेमाल किया। मेरे पास प्रतिक्रिया-राउटर v2.4.0 (और इतिहास v2.1.1) का नवीनतम संस्करण है। लेकिन समस्या बनी रहती है।

मुझे मिला एकमात्र समाधान node_modules/history/lib/DOMUtils: navigatorwindow.navigator में बदलना है। हालांकि यह एक हैक है, और एक अच्छा समाधान नहीं है।

मुझे लगता है कि समस्या प्रतिक्रिया-राउटर के साथ है, लेकिन मेरे पास कोई समाधान नहीं है।

बस मामले में, मेरा 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}; 

उत्तर

23

ऐसा लगता है react-router मानता है कि navigator वैश्विक क्षेत्र में है।

इस त्रुटि को हल करने के लिए, आप अपने परीक्षण सेटअप चरण में वैश्विक क्षेत्र को navigator जोड़ना चाहिए:

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

एक आकर्षण की तरह काम किया! धन्यवाद। – Valjas