我正在尝试使用Jest用于测试运行程序，使用enzyme用于测试实用程序（针对启动程序的简单浅显式渲染）来测试我的React应用程序。即使没有进行任何测试，将组件简单地导入测试文件也会在主index.js文件上引发错误（该文件仅导入<App/>组件并将其呈现到DOM中），指向{{1} }并显示错误消息ReactDOM.render()。我已经尝试过使用Invariant Violation: Target container is not a DOM element.库（在测试文件和模拟文件中本地传递到Jest槽jsdom道具的本地库）中模拟DOM，但是我的setupFiles重新分配似乎可以被忽略。
这是我的global.document文件：
browserMock.js
因此，当我打印import jsdom from 'jsdom';
const { JSDOM } = jsdom;
const dom = new JSDOM('<!DOCTYPE html><html><head></head><body><div id="app"></div></body></html>');
const { window, window: { document } } = dom;
global.window = window;
global.document = document;和document的值时-它们是完全不同的对象。 global.document返回global.document.getElementById('app')，而null确实返回所需的document.getElementById('app')。
这也是我的div（它拥有package.json的配置）：
Jest
我的{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest",
"test:watch": "jest --watchAll",
"start": "parcel index.html -p 3000 --open",
"build": "parcel build src/index.js"
},
"author": "malyfko",
"license": "MIT",
"dependencies": {
"autoprefixer": "^9.1.0",
"classnames": "^2.2.6",
"postcss-modules": "^1.3.2",
"prop-types": "^15.6.2",
"query-string": "^6.1.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-infinite-scroller": "^1.2.0",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-devtools-extension": "^2.13.5",
"redux-observable": "^1.0.0",
"reselect": "^3.0.1",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^3.1.2",
"babel-preset-stage-0": "^6.24.1",
"enzyme": "^3.6.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.50.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.10.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.5.0",
"jsdom": "^12.0.0",
"node-sass": "^4.9.3",
"parcel-bundler": "^1.9.7"
},
"jest": {
"testRegex": "((\\.|/)(test))\\.js$",
"moduleFileExtensions": [
"jsx",
"js"
],
"moduleDirectories": [
"node_modules",
"src"
],
"rootDir": "src",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|scss)$": "identity-obj-proxy"
},
"setupFiles": [
"<rootDir>/__mocks__/browserMock.js"
]
}
}文件（以防万一）：
index.js
我的测试文件：
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from 'components/App';
import 'styles/main.scss';
ReactDOM.render(
(<App />),
document.getElementById('app'),
);
我怀疑它是否会有所不同，但如果确实如此，我也将import React from 'react';
import { shallow } from 'enzyme';
import { MyComponent } from 'components/MyComponent';
describe('MyComponent testing', () => {
test('', () => {});
});用于捆绑程序（尽管它仍然在编译时使用parcel）
关于SO的类似问题并没有太大帮助。