Mocha + React：未定义导航器

Question

我正在尝试为 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', () => {

        })
    })
})

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

Answer 1

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

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

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 的安装文件中。

Answer 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"
  };
}

Mocha + React：未定义导航器

Mocha + React: navigator is not defined

javascript

mocha.js

navigator

reactjs

2021 年临近