Mocha + React：导航器未定义答案

【问题标题】：Mocha + React: navigator is not definedMocha + React：导航器未定义
【发布时间】：2017-05-02 19:59:14
【问题描述】：

我正在尝试为 React 组件编写第一个测试并不断出错：

ReferenceError: navigator is not defined

我有一个组件，其中一个子组件使用codemirror 来显示可编辑的文本区域。问题是在 codemirror 中有一个导航器类型的检查。而且由于我不是在浏览器中运行此代码，而是在带有 node.js 的终端中运行此代码，因此未定义。

SO 上的一些人建议设置全局变量，但它对我不起作用。下面是测试代码：

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

import React from 'react'
import { shallow, render } from 'enzyme'
import { expect } from 'chai'
import { MessagesView } from '../../components/MessagesView'

describe('components', () => {
    describe('Message views', () => {
        it('render buttons', () => {

        })
    })
})

还有办法设置导航器变量吗？或者我可以使用 mocha 选项设置全局变量？

【问题讨论】：

标签： javascript reactjs mocha.js navigator

【解决方案1】：

看这里https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md

基本上你需要配置 jsdom 来为你创建窗口对象。

var jsdom = require('jsdom').jsdom;

global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
  if (typeof global[property] === 'undefined') {
    global[property] = document.defaultView[property];
  }
});

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

这应该放在Mocha的安装文件中。

【讨论】：

【解决方案2】：

...这确实发生了一些变化。

2021 年接近


const JSDOM = require( "jsdom" ).JSDOM;

/**
 *  Simulate browser environment for nodejs.
 */
module.exports.browserenv =  function() {
  const cfg       = { url: "http://localhost" };
  const dom       = new JSDOM( "", cfg );
  global.window   = dom.window;
  global.document = dom.window.document;

  Object.keys( global.window ).forEach(( property ) => {
    if ( typeof global[ property ] === "undefined" ) {
         global[ property ] = global.window[ property ];
    }
  });

  global.Element   = window.Element;
  global.Image     = window.Image;
  // maybe more of: global.Whatever = window.Whatever

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

【讨论】：