Question

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

ReferenceError: navigator is not defined

我有组件，其中一个孩子使用codemirror来显示可编辑的textareas。问题是在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选项设置全局变量吗？

Answer 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的设置文件中。

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：未定义导航器

2 个答案:

2021 年临近