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

我正在尝试在使用Webpack时测试带有Jest /酶的React组件。测试反应：目标容器不是DOM元素

我有一个非常简单的测试@

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导致失败：

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 />的进口，并由此导致失败。堆栈跟踪说明App.js的第14行是失败的原因 - 这只不过是来自react-dom的渲染调用，这是我从来没有遇到过的挑战（应用程序从我的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)$": "<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：

<!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？

来源

2016-10-11 ilrein

App.jsx应该导出应用程序类，什么也不做，render应该在别处调用。

如果您从App.jsx错误中删除render错误应该会消失，它会弹出，因为测试环境不提供带有app id的DOM。

来源

2016-10-17 16:06:23 biphobe

我得到了同样的错误： - 我与阿娃测试.. 请告诉我，我应该在哪里错了.. 出口默认类应用延伸元器件{ 渲染（）{ 回报（

{this.props.children}

） } } 渲染（（ <路由器历史= {browserHistory}> <路由路径= “/” 成分= {应用}> <路由路径= “第1页” 成分= {第1页} /> <路由路径= “第2页” 成分= {第2页} /> ），文件.getElementById（ '应用程序'））; –

@BhavikKheni请创建新的问题，并在其中包含完整的代码以及错误和堆栈跟踪。 – biphobe

对于像我一样梳理互联网的其他人 - 在用Jest测试时寻找解决方案 - 我会通过@biphobe备份答案，说Jest会在您发生此错误时发生将内容导出到调用ReactDOM.render的同一文件中。在我的例子中，我有一个小对象，用于配置另一个在我的index.js中导出的组件，在那里我也调用了ReactDOM.render。我删除了这个导出，它被修复了！

来源

2017-03-05 17:56:58

谢谢，那正是我正在寻找的。明确提到调用'ReactDOM.render（）'正是我需要理解的确切问题！ – Aaron

很高兴这有帮助！ –

即时尝试在我的测试中导入操作时有类似的问题。不幸的是删除ReactDom没有帮助 –

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

回答

相关问题