我正在尝试在使用Webpack时使用Jest / Enzyme测试React组件。
我有一个非常简单的测试@
import React from 'react'; import { shallow } from 'enzyme'; import App from './App'; it('App', () => { const app = shallow(<App />); expect(1).toEqual(1); });
它要拾取的相对组件是:
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会导致失败:
jest
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)
测试文件引用第4行,该行是的导入<App />,导致失败。堆栈跟踪显示第14行App.js是失败的原因-仅仅是来自的render调用react- dom,这是我从未遇到过的挑战(该应用程序可从我的Webpack设置正确渲染)。
<App />
App.js
react- dom
对于那些感兴趣的人(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:
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:
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有关吗?
App.jsx应该导出App类并且不执行其他操作,render应在其他位置调用。
App.jsx
render
如果render从App.jsx中删除该调用,该错误应消失,因为测试环境未提供具有appID 的DOM,所以该错误会弹出。
app