Testing React: Target Container is not a DOM element : <p>I'm attempting to test a React component with Jest/Enzyme while using Webpack.</p>

<p>I have a very simple test @</p>

<pre><code>import React from 'react';
import { shallow } from 'enzyme';

import App from './App';

it('App', () =&gt; {
  const app = shallow(&lt;App /&gt;);
  expect(1).toEqual(1);
});
</code></pre>

<p>The relative component it's picking up is :</p>

<pre><code>import React, { Component } from 'react';
import { render } from 'react-dom';

// import './styles/normalize.css';

class App extends Component {
  render() {
    return (
      &lt;div&gt;app&lt;/div&gt;
    );
  }
}

render(&lt;App /&gt;, document.getElementById('app'));
</code></pre>

<p>However, running <code>jest</code> causes a failure:</p>

<p><code>Invariant Violation: _registerComponent(...): Target container is not a DOM element.</code></p>

<p>With errors @ </p>

<p><code>at Object.&lt;anonymous&gt; (src/App.js:14:48)
at Object.&lt;anonymous&gt; (src/App.test.js:4:38)
</code></p>

<p>The test files references line 4, which is the import of <code>&lt;App /&gt;</code>, that causes a fail. The stack trace says line 14 of <code>App.js</code> is the reason for the failure -- which is nothing more than the render call from <code>react-dom</code>, something I've never had a challenge with (the app renders properly from my Webpack setup).</p>

<p>For those interested (Webpack code):</p>

<pre><code>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&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]'
      },
      {
        test: /\.scss$/,
        loader: 'style!css-loader?modules&amp;importLoaders=1&amp;localIdentName=[name]__[local]___[hash:base64:5]!sass'
      }
    ]
  }
}
</code></pre>

<p>And my <code>package.json</code>:</p>

<pre><code>{
  "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)$": "&lt;rootDir&gt;/__mocks__/fileMock.js",
      "^.+\\.(css|sass)$": "&lt;rootDir&gt;/__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"
  }
}
</code></pre>

<p>Oh, and if anyone is going to say that the div element isn't being loaded before the script, here's my <code>index.html</code>:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;script src="/bundle.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>What could be the reason for this peculiar rendering problem? Something to do with a new Jest update to 15.0?</p>
