测试React：目标容器不是DOM元素

11 浏览
0 Comments

测试React：目标容器不是DOM元素

我正在尝试使用Jest/Enzyme和Webpack来测试一个React组件。

我有一个非常简单的测试代码，引入了React和enzyme，然后引入了App组件，并对其进行了测试。

然而，运行jest命令失败了，报错信息为"Invariant Violation: _registerComponent(...): Target container is not a DOM element."，错误发生在App.js文件的第14行和App.test.js文件的第4行。

测试文件引用了第4行，即引入这个组件，导致了失败。错误信息说App.js文件的第14行是失败的原因，而第14行只是react-dom的render调用，这是我从未遇到过的问题（我的Webpack设置可以正常渲染应用）。

以下是Webpack的配置代码：

module.exports = {

entry: './src/App',

output: {

filename: 'bundle.js',

path: './dist'

},

module: {

loaders: [

{

test: /\.js?$/,

exclude: /node_modules/,

loader: 'babel',

query: {

presets: ['react', 'es2015']

}

},

{

test: /\.css$/,

loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'

},

{

test: /\.scss$/,

loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass'

}

]

}

};

以下是我的package.json文件：

{

"name": "tic-tac-dux",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"dev": "webpack-dev-server --devtool eval --progress --colors --inline --hot --content-base dist/",

"test": "jest"

},

"jest": {

"moduleNameMapper": {

"^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",

"^.+\\.(css|sass)$": "/__mocks__/styleMock.js"

}

},

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {

"babel-core": "^6.17.0",

"babel-jest": "^16.0.0",

"babel-loader": "^6.2.5",

"babel-polyfill": "^6.16.0",

"babel-preset-es2015": "^6.16.0",

"babel-preset-react": "^6.16.0",

"css-loader": "^0.25.0",

"enzyme": "^2.4.1",

"jest": "^16.0.1",

"jest-cli": "^16.0.1",

"node-sass": "^3.10.1",

"react-addons-test-utils": "^15.3.2",

"react-dom": "^15.3.2",

"sass-loader": "^4.0.2",

"style-loader": "^0.13.1",

"webpack": "^1.13.2",

"webpack-dev-server": "^1.16.2"

},

"dependencies": {

"react": "^15.3.2",

"react-dom": "^15.3.2"

}

}

如果有人说div元素在脚本之前没有加载，这是我的index.html文件：

App

可能导致这个奇怪的渲染问题的原因是什么？是Jest更新到15.0版本所致吗？

0

3 答案

0 Comments

问题：Testing React: Target Container is not a DOM element 的出现原因是因为测试环境没有提供DOM中的app id。

解决方法：将App.jsx中的render调用移除即可解决该错误。

下面是一份示例代码：

// App.jsx
export default class App extends Component {
  render() {
    return (
      

        {this.props.children}
      

    )
  }
}
// index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import App from './App';
import Index from './Index';
import Page1 from './Page1';
import Page2 from './Page2';
ReactDOM.render((
  
    
      
      
      
    
  
), document.getElementById('app'));

如果还有其他问题，请创建一个新问题，并包含完整的代码、错误信息和堆栈跟踪。如果不在App.jsx中调用，那应该在哪里调用呢？

0
0 Comments

在这个例子中，问题出现的原因是因为在使用redux和router时，ReactDOM.render()方法无法找到根元素（id为"root"的DOM元素）。解决这个问题的方法是将document.getElementById("root")更改为document.getElementById('root') || document.createElement('div')，这样在找不到根元素时会创建一个div元素作为替代。另外，还有一位用户提到将双引号改为单引号也解决了这个问题。但是对于为什么这样做会起作用，他表示感到意外并请求解释。

0
0 Comments

在使用Jest进行测试时，出现了"Testing React: Target Container is not a DOM element"这个错误。根据网上的解决方法和答案，我发现这个错误是由于在调用ReactDOM.render的同时在同一个文件中导出了一个对象导致的。解决方法就是移除这个导出的对象。

这个问题也出现在我尝试在测试中导入actions时。不幸的是，移除ReactDOM并不能解决这个问题。

我遇到了类似的问题，当我尝试在同一个JavaScript文件中同时调用ReactDOM.render和导出一些内容时，遇到了Jest的问题。

我明白了！谢谢。我在使用ReactDOM.render的入口文件中添加了一个对象的导出。但是目前还没有针对这个文件的测试。

以上就是关于"Testing React: Target Container is not a DOM element"这个问题出现的原因以及解决方法的整理。如果你在使用Jest进行测试时遇到了这个问题，希望这篇文章能对你有所帮助。

0