Mocha + React：未定义导航器

IT技术 javascript reactjs mocha.js navigator
2021-04-27 17:25:28

我正在尝试为 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 选项设置全局变量？

2个回答

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

......这确实改变了一点。

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"
  };
}
其它你可能感兴趣的问题
上一篇我可以在 React 的 Component 中编写 Component 吗？ 下一篇如何改进这个 Benchy？碧曲B1