title: Testem receiving imports compiled to `require` when using ES2015/React presets to Babel
body: <p>I have a project which is set up so that it builds with <a href="/questions/tagged/react" class="post-tag" title="show questions tagged &#39;react&#39;" rel="tag">react</a>and <a href="/questions/tagged/jsx" class="post-tag" title="show questions tagged &#39;jsx&#39;" rel="tag">jsx</a>. It works fine to build it using <code>node_modules/webpack/bin/webpack.js --config webpack.config.js</code> and I can run the result in the browser with no problems. However, when I run <code>npm test</code> and view the test runner in the browser, I get the error: <code>"Uncaught ReferenceError: require is not defined at dashboard-tests.js:3"</code>. It seems that webpack is compiling my tests (but not my normal code) into a version of <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged &#39;javascript&#39;" rel="tag">javascript</a>that can't be run in browsers.</p>
  
  <p>Here are the relevant files:</p>
  
  <p>.babelrc:</p>
  
  <pre><code>{
     "presets": ["es2015", "react"]
  }
  </code></pre>
  
  <p>testem.json:</p>
  
  <pre><code>{
    "framework": [
      "jasmine"
    ],
    "launch_in_dev": [
      "PhantomJS"
    ],
    "launch_in_ci": [
      "PhantomJS"
    ],
    "serve_files": [
      "tmp/**/*-test{,s}.js"
    ],
    "on_start": "babel static_source --out-dir tmp",
    "on_exit": "yes | rm -r tmp"
  }
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>{
    "main": "index.js",
    "scripts": {
      "test": "testem"
    },
    "dependencies": {
      "jquery": "^3.2.1",
      "prop-types": "^15.6.0",
      "react": "^16.0.0",
      "react-dom": "^16.0.0",
      "react-feather": "^1.0.7"
    },
    "devDependencies": {
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-preset-env": "^1.6.1",
      "babel-preset-react": "^6.24.1",
      "jasmine-es6": "^0.4.3",
      "testem": "^1.18.4",
      "webpack": "^3.6.0"
    }
  }
  </code></pre>
  
  <p>webpack.config.js:</p>
  
  <pre><code>var path = require("path");
  var webpack = require('webpack');
  
  module.exports = {
    context: __dirname,
    entry: './static_source/js/index.js', 
    output: {
      path: path.resolve('./app/static/js/'),
      filename: "compiled.js"
    },
    plugins: [],
    module: {
      loaders: [
        { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
        { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
      ],
    }
  }
  </code></pre>
  
  <p>dashboard-tests:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from "react-dom";
  import TestUtils from "react-dom/test-utils";
  
  import Dashboard from './dashboard';
  
  describe('Dashboard', function() {
    it('exists', function() {
      expect(Dashboard).not.toBe(undefined);
    });
  
    it('renders arrows', function() {
      var dashboard = &lt;Dashboard /&gt;;
      var renderedDashboard = TestUtils.renderIntoDocument(dashboard);
  
      var arrowsDiv = TestUtils.findRenderedComponentWithClass('arrows');
  
      expect(arrowsDiv).not.toBe(undefined);
    });
  });
  </code></pre>