title: Testing React: Target Container is not a DOM element
body: <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>