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', () => {

        })
    })
})

還有辦法設置導航器變量嗎？ 或者我可以使用 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"
  };
}