2017-10-23 4 views
0

Ich erhalte den folgenden Fehler, wenn ich die mount-Funktion von Enzyme beim Testen einer React-App in Jest über die Befehlszeile verwende. Es besagt, dass eine DOM-Umgebung nicht geladen ist, was meiner Meinung nach bedeutet, dass ich JSDOM einrichten muss. Es scheint jedoch, dass JSDOM ships with Jest and is preconfigured nach Facebook-Dokumentation für Jest. Hier ist mein Test:Stellen Sie sicher, dass eine dom-Umgebung für das Enzym geladen wird

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) 
}); 

Und hier ist der Fehler:

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>) 

Es scheint verwandt zu sein Enzym-Adapter reagieren-16. Irgendeine Idee, was könnte falsch sein?

+0

Wie führen Sie Ihre Tests durch? – Akhil

+0

'npm test' in der Befehlszeile, was ein Befehl ist, der in package.json definiert ist, um' jest' ohne Optionen auszuführen – Kimberly

Antwort

0

Es scheint, dass das Problem war, dass JSDOM und Enzym nicht richtig eingerichtet wurden. Addiert man diese Datei als vorinstallierte Datei, um sie zu befestigen 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() }) 
0

Jest mit JSDom aus der Box konfiguriert kommt, müssen Sie sicherstellen, dass testEnvironment: jsdom in Ihrer Konfiguration zu verwenden.

Verwandte Themen