title: Unit testing ES7 React components with Jest
body: <p>How do you make Jest play nicely with ES7 initializers? I've searched far a wide on here and other sources, but didn't find anything conclusive.</p>
  
  <p><code>.babelrc.js</code></p>
  
  <pre><code>{
      "env": {
          "development": {
              "presets": [["es2015", { "modules": false }], "react", "react-hmre"],
              "plugins": [
                  "transform-class-properties",
                  "react-hot-loader/babel"
              ]
          },
          "test": {
              "presets": ["env", "react"],
              "plugins": ["transform-class-properties"]
          },
          "production": {
              "presets": [["es2015", { "modules": false }], "react"],
              "plugins": ["transform-class-properties"]
          }
      }
  }
  </code></pre>
  
  <p><code>package.json</code></p>
  
  <pre><code>    {
      "name": "demo",
      "version": "1.0.0",
      "main": "index.js",
      "license": "MIT",
      "private": true,
      "dependencies": {
          "react": "^15.5.4",
          "react-dom": "^15.5.4",
      },
      "devDependencies": {
          "babel-cli": "^6.24.1",
          "babel-core": "^6.24.1",
          "babel-jest": "^20.0.3",
          "babel-plugin-transform-class-properties": "^6.24.1",
          "babel-polyfill": "^6.23.0",
          "babel-preset-env": "^1.5.2",
          "babel-preset-es2015": "^6.24.1",
          "babel-preset-react": "^6.24.1",
          "babel-preset-react-hmre": "^1.1.1",
          "enzyme": "^2.8.2",
          "react-hot-loader": "next",
          "babel-plugin-import": "^1.2.1",
          "enzyme": "^2.9.1",
          "enzyme-to-json": "^1.5.1"
      },
      "scripts": {
          "test": "export NODE_ENV=test &amp;&amp; ./node_modules/.bin/jest --no-cache"
      },
      "engines": {
          "node": "&gt;= 7.8.0"
      },
      "jest": {
          "verbose": true,
          "collectCoverage": true,
          "coverageDirectory": "__coverage__",
          "mapCoverage": true,
          "setupFiles": [
              "./tests/setup.js"
          ],
          "testPathIgnorePatterns": [
              "/node_modules/"
          ],
          "transform": {
              "\\.js$": "../node_modules/babel-jest"
          },
          "testRegex": ".*\\.test\\.js$",
          "snapshotSerializers": [
              "enzyme-to-json/serializer"
          ]
      }
  }
  </code></pre>
  
  <p><code>Demo.jsx</code></p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  
  export class Demo extends React.Component {
  
      static props = { name: PropTypes.string.isRequired };
  
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;div className='demo'&gt;{this.props.name}&lt;/div&gt;
          );
      }
  
  }
  </code></pre>
  
  <p><code>Demo.test.js</code></p>
  
  <pre><code>import React from 'react';
  import { Demo } from '..';
  import { render } from 'enzyme';
  
  
  describe('Demo', () =&gt; {
      it('renders correctly', () =&gt; {
          const wrapper = render(&lt;Demo name="foo" /&gt;);
          expect(wrapper).toMatchSnapshot();
      });
  });
  </code></pre>
  
  <p>After running <code>yarn test</code> or <code>export NODE_ENV=test &amp;&amp; ../node_modules/.bin/jest --no-cache</code>, Jest will complain that it sees an unexpected character </p>
  
  <pre><code> 8 |     props = {
     |           ^
   9 |         name: PropTypes.string.isRequired
  </code></pre>
  
  <p>From my understanding, the environment variable set when we run the tests should automatically transform the initializers to something which can be used by Jest, but this doesn't appear to be happening.</p>
  
  <p>I am also using webpack 2.x, but the configuration overhead to get that to work seems daunting. Is there another way?</p>
  
  <h2>Update 1</h2>
  
  <p>I modified my Jest settings as follows:</p>
  
  <pre><code> "transform": {
        "\\.js$": "./node_modules/babel-plugin-transform-class-properties"
   }
  </code></pre>
  
  <p>This failed immediately with:</p>
  
  <blockquote>
    <p>TypeError: Jest: a transform must export a <code>process</code> function.</p>
  </blockquote>
  
  <p>Removing <code>transform</code> altogether yields a slightly different issue:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'props' of null</p>
  </blockquote>
  
  <p>I also added the <code>constructor</code> to the <code>Demo</code> component.</p>