测试React:目标容器不是DOM元素 [英] Testing React: Target Container is not a DOM element
问题描述
我正在尝试在使用Webpack时使用Jest/Enzyme测试React组件.
I'm attempting to test a React component with Jest/Enzyme while using Webpack.
我有一个非常简单的测试@
I have a very simple test @
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';
it('App', () => {
const app = shallow(<App />);
expect(1).toEqual(1);
});
它要拾取的相对成分是:
The relative component it's picking up is :
import React, { Component } from 'react';
import { render } from 'react-dom';
// import './styles/normalize.css';
class App extends Component {
render() {
return (
<div>app</div>
);
}
}
render(<App />, document.getElementById('app'));
但是,运行jest
会导致失败:
However, running jest
causes a failure:
Invariant Violation: _registerComponent(...): Target container is not a DOM element.
有错误@
at Object.<anonymous> (src/App.js:14:48)
at Object.<anonymous> (src/App.test.js:4:38)
at Object.<anonymous> (src/App.js:14:48)
at Object.<anonymous> (src/App.test.js:4:38)
测试文件引用第4行,这是<App />
的导入,导致失败.堆栈跟踪显示App.js
的第14行是失败的原因-仅仅是来自react-dom
的render调用,这是我从未遇到过的挑战(该应用程序可从我的Webpack设置正确渲染)
The test files references line 4, which is the import of <App />
, that causes a fail. The stack trace says line 14 of App.js
is the reason for the failure -- which is nothing more than the render call from react-dom
, something I've never had a challenge with (the app renders properly from my Webpack setup).
对于那些感兴趣的人(Webpack代码):
For those interested (Webpack code):
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)$": "<rootDir>/__mocks__/fileMock.js",
"^.+\\.(css|sass)$": "<rootDir>/__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
:
Oh, and if anyone is going to say that the div element isn't being loaded before the script, here's my index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
</head>
<body>
<div id="app"></div>
<script src="/bundle.js"></script>
</body>
</html>
这个特殊的渲染问题可能是什么原因?与新的Jest更新到15.0有关吗?
What could be the reason for this peculiar rendering problem? Something to do with a new Jest update to 15.0?
推荐答案
App.jsx
应该导出App类并且不执行其他操作,render
应该在其他位置调用.
App.jsx
is supposed to export the App class and do nothing more, render
should be called elsewhere.
如果从App.jsx中删除render
调用,该错误应该消失,则会弹出该错误,因为测试环境没有为DOM提供app
id.
If you remove the render
call from the App.jsx error should disappear, it pops up because the test environment doesn't supply the DOM with an app
id.
这篇关于测试React:目标容器不是DOM元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!