开玩笑测试错误 - 不变违规：目标容器不是 DOM 元素答案

【问题标题】：Jest Testing Error - Invariant Violation: Target container is not a DOM element开玩笑测试错误 - 不变违规：目标容器不是 DOM 元素
【发布时间】：2018-07-14 10:21:53
【问题描述】：

我刚开始做单元测试，一直收到这个错误：

不变违规：目标容器不是 DOM 元素。

在不变量处（node_modules/fbjs/lib/invariant.js:42:15）

在 legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:17238:34)

在 Object.render (node_modules/react-dom/cjs/react-dom.development.js:17317:12)

在对象。 (src/client/index.js:243:73)

在对象。 (src/client/components/block/Header.js:294:40)

在对象。 (src/client/components/block/index.js:123:41)

在对象。 (src/client/containers/app.js:195:40)

在对象。 (tests/client/containers/App.test.js:13:12)

我认为这与我的 app.js 的结构方式有关，但不知道为什么......

这里是我的 App.js：

const App = () => (
  <Box>
    <Router getUserConfirmation={getConfirmation} hashType={'noslash'} basename={'/'}>
      <Box>
        <Route exact path="/" component={Home}/>
        <Route path="/:room" component={Room}/>
      </Box>
    </Router>
  </Box>
)

const mapStateToProps = (state) => {
  return {
    message: state.message
  }
}
export default connect(mapStateToProps, null)(App)

我正在使用 jest/enzyme/chai 进行单元测试

我的 App.test.js ：

import { expect } from 'chai'
import React from 'react'
import { shallow } from 'enzyme'
import App from '../../../src/client/containers/app'

jest.mock('react-router')

describe('<App />', () => {
  it('renders without crashing', () => {
    const wrapper = shallow(
      <App/>
    ).dive()
  })
})

我在 package.json 中的 devDependecies ：

"devDependencies": {
    "babel-cli": "^6.7.7",
    "babel-core": "^6.7.7",
    "babel-eslint": "^7.2.2",
    "babel-jest": "^23.4.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-__coverage__": "^0.111111.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-watch": "^2.0.2",
    "chai": "^4.1.2",
    "chai-enzyme": "^1.0.0-beta.1",
    "chai-jest-diff": "^1.0.2",
    "chai-jest-snapshot": "^2.0.0",
    "dirty-chai": "^2.0.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.0.0",
    "eslint-plugin-babel": "^3.3.0",
    "eslint-plugin-react": "^7.10.0",
    "jest": "^23.4.1",
    "nyc": "^6.4.4",
    "react-test-renderer": "^16.4.1",
    "redux-devtools-extension": "^2.13.5",
    "webpack": "^1.13.0",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-hot-middleware": "^2.10.0"
  },

还有我的 webpack.config.js ：

var path = require('path');

module.exports = {
  entry: './src/client/index.js',

  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  devServer: {
    compress: true,
    disableHostCheck: true,
  },

  watchOptions: {
    poll: 1000,
    aggregateTimeout:300,
  },

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query:{
        presets: ["es2015", "react", "stage-0"]
      }
    }]
  }
};

感谢您的帮助:)

编辑：

正在寻找解决方案，我注意到在我的组件导入过程中出现错误！它会来自 webpack 吗？

编辑：

我的错误出现在我的 HEADER.JS 中，因为我使用持久化器来管理我的用户连接。暂时我删除它

【问题讨论】：

也许需要更多细节？我的错误是什么？泰:)

标签： reactjs unit-testing jestjs chai enzyme

【解决方案1】：

您要确保index.html 文件中带有id="root" 的元素未在body 元素上设置。原因是当脚本完成执行时，document 元素还不可用。

请参阅@Dan Abramov here 的答案。

【讨论】：