确保为酶加载 dom 环境答案

【问题标题】：ensure a dom environment is loaded for enzyme确保为酶加载 dom 环境
【发布时间】：2018-04-04 10:21:07
【问题描述】：

从命令行在 Jest 中测试 React 应用程序时使用 Enzyme 的 mount 函数时出现以下错误。它说没有加载 DOM 环境，我认为这意味着我需要设置 JSDOM。但是，根据 Facebook 的 Jest 文档，JSDOM ships with Jest and is preconfigured 似乎。这是我的测试：

import React from 'react'
import MyComponent from '../src/components/MyComponent'
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
import { mount, shallow } from 'enzyme'
import { Menu, Dropdown, Modal } from 'semantic-ui-react'
import renderer from 'react-test-renderer';

configure({ adapter: new Adapter() })

test('it works', () => {
    const wrapper = mount(
        <MyComponent />
    )
    expect(wrapper.contains('foobar')).toEqual(true)
});

这是错误：

Enzyme's mount expects a DOM environment to be loaded, but found none

  at assertDomAvailable (node_modules/enzyme-adapter-utils/build/Utils.js:107:11)
  at ReactSixteenAdapter.createMountRenderer (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:203:52)
  at ReactSixteenAdapter.createRenderer (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:384:25)
  at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:96:54)
  at mount (node_modules/enzyme/build/mount.js:19:10)
  at Object.<anonymous> (test/LinesheetModal.test.js:12:37)
      at new Promise (<anonymous>)

它似乎与酶适配器反应 16 有关。知道有什么问题吗？

【问题讨论】：

你的测试如何运行？
npm test 在命令行上，这是在 package.json 中定义的用于运行 jest 的命令，没有选项

标签： javascript reactjs jestjs enzyme jsdom

【解决方案1】：

看起来问题在于 JSDOM 和 Enzyme 设置不正确。将此文件作为预加载文件添加到 Jest 修复它：

import Adapter from 'enzyme-adapter-react-16'
import { configure } from 'enzyme'
import jsdom from 'jsdom'

function setUpDomEnvironment() {
    const { JSDOM } = jsdom;
    const dom = new JSDOM('<!doctype html><html><body></body></html>', {url: 'http://localhost/'});
    const { window } = dom;

    global.window = window;
    global.document = window.document;
    global.navigator = {
        userAgent: 'node.js',
    };
    copyProps(window, global);
}

function copyProps(src, target) {
    const props = Object.getOwnPropertyNames(src)
        .filter(prop => typeof target[prop] === 'undefined')
        .map(prop => Object.getOwnPropertyDescriptor(src, prop));
    Object.defineProperties(target, props);
}

setUpDomEnvironment();

configure({ adapter: new Adapter() })

【讨论】：

【解决方案2】：

Jest 配置了开箱即用的 JSDom，您需要确保在配置中使用 testEnvironment: jsdom。

【讨论】：

【解决方案3】：

更新：我再次点击这个 - 我在 describe() 函数上使用了 async 关键字

正如我在https://github.com/airbnb/enzyme/issues/1558 中提到的，当我遇到这个问题时，这是由于我应该早于传递和执行done()。

【讨论】：

【解决方案4】：

将此添加到您的笑话配置中：

{
  testEnvironment: 'jsdom',
  verbose: true,
  testURL: 'http://localhost/',
}

【讨论】：

【解决方案5】：

就我而言，我在测试中错过了以下导入：

import 'node_modules/jsdom-global/register'

【讨论】：