測試反應：目標容器不是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元素

回答

相關問題