title: Jest testing with React, Typescript and ES6
body: <p>I'm having some issues testing a React component written in Typescript(v2.0.3) with Jest(v16.0.1) tests written in ES6.</p>
  
  <p>I'm using the ts-jest(v0.1.8) preprocessor and the relevant part of my package.json looks like</p>
  
  <pre><code>  "jest": {
      "scriptPreprocessor": "&lt;rootDir&gt;/node_modules/ts-jest/preprocessor.js",
      "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
      "moduleFileExtensions": [
        "ts",
        "tsx",
        "js"
      ]
    } 
  </code></pre>
  
  <p>But when I run the tests I get:</p>
  
  <pre><code> FAIL  app/components/__tests__/TestTotalNumberOfTeapots.js
    ● Test suite failed to run
  
      /Users/aaron/Desktop/teabot_stats/app/components/__tests__/TestTotalNumberOfTeapots.js:1
      ({"Object.&lt;anonymous&gt;":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                               ^^^^^^
      SyntaxError: Unexpected token import
  
        at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
  
  Test Suites: 1 failed, 1 total
  Tests:       0 total
  Snapshots:   0 total
  Time:        0.673s
  Ran all test suites.
  </code></pre>
  
  <p>My test looks like</p>
  
  <pre><code>import React from 'react';
  import TotalNumberOfTeapots from '../TotalNumberOfTeapots.tsx';
  import renderer from 'react-test-renderer';
  
  it('renders correctly', () =&gt; {
    const tree = renderer.create(
      &lt;TotalNumberOfTeapots numberOfTeapots='1' /&gt;
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });
  </code></pre>
  
  <p>I assume I need to have a setup where my components are transpiled from Typescript to ES5 using ts-jest and my tests are transpiled from ES6 to ES5 using babel-jest before Jest reads them but I'm not sure how?</p>