Jest Testing Error - Invariant Violation: Target container is not a DOM element

Question

I'm new to doing unit testing and I keep getting this error:

Invariant Violation: Target container is not a DOM element.

at invariant (node_modules/fbjs/lib/invariant.js:42:15)

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

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

at Object. (src/client/index.js:243:73)

at Object. (src/client/components/block/Header.js:294:40)

at Object. (src/client/components/block/index.js:123:41)

at Object. (src/client/containers/app.js:195:40)

at Object. (tests/client/containers/App.test.js:13:12)

I think it has to do with the way my app.js is structured but dont know why...

Here my 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)

I'm using jest/enzyme/chai for unit tests

my 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()
  })
})

my devDependecies in package.json :

"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"
  },

and my 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"]
      }
    }]
  }
};

Thank you for help :)

EDIT:

Looking for a solution, I noticed that the error occurs during the import of my components! Would it come from webpack?

EDIT:

My error was in my HEADER.JS because I use persistor for manage my user connection. For moment I delete it

codejockie codejockie · Accepted Answer · 2018-11-01T10:52:55

You want to ensure that your element with the id="root" in your index.html file is not set on on the body element. Reason being that by the time the script finishes execution, document element is not available yet.

Refer to this answer by @Dan Abramov here.

Jest Testing Error - Invariant Violation: Target container is not a DOM element

1 Answers