title: How can I make jest run with the same config as react-script test on a create-react-app?
body: <p>I know I can run <code>npm test</code> which runs <code>react-script test</code> and it works, it successfully run the tests. But I'm interested in figuring out how to run <code>jest</code> directly with the same configuration <code>react-script</code> uses. Hopefully without having to replicate the configuration or ejecting the app. I started reading the source code of <code>react-scripts</code> but so far I couldn't figure it out.</p>
  <p>The reasons for wanting this are:</p>
  <ul>
  <li>My CRA project is part of a bigger project, and I could just run <code>jest</code> on the top level and run all tests.</li>
  <li>In WebStorm, I can take advantage of the Jest integration, which includes:
  <ul>
  <li>Showing the list of tests that pass or fail, as they run.</li>
  <li>Being able to run individual tests.</li>
  <li>Doing code coverage.</li>
  </ul>
  </li>
  </ul>
  <p>If I run <code>jest</code> on my CRA app, I get this error:</p>
  <pre><code>PS C:\Users\pupeno\Documents\Flexpoint Tech\js\exp7\frontend&gt; jest
   FAIL  src/App.test.tsx
    ● Test suite failed to run
  
      Jest encountered an unexpected token
  
      This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
  
      By default, if Jest sees a Babel config, it will use that to transform your files, ignoring &quot;node_modules&quot;.
  
      Here's what you can do:
       • To have some of your &quot;node_modules&quot; files transformed, you can specify a custom &quot;transformIgnorePatterns&quot; in your config.
       • If you need a custom transformation specify a &quot;transform&quot; option in your config.
       • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the &quot;moduleNameMapper&quot; config option.
  
      You'll find more details and examples of these config options in the docs:
      https://jestjs.io/docs/en/configuration.html
  
      Details:
  
      SyntaxError: C:\Users\pupeno\Documents\Flexpoint Tech\js\exp7\frontend\src\App.test.tsx: Unexpected token (6:29)
  
        4 | 
        5 | test(&quot;renders Facebook link&quot;, () =&gt; {
      &gt; 6 |   const {getByText} = render(&lt;App/&gt;)
          |                              ^
        7 |   const linkElement = getByText(/Loading.../i)
        8 |   expect(linkElement).toBeInTheDocument()
        9 | })
  
        at Parser._raise (node_modules/@babel/parser/src/parser/error.js:60:45)
        at Parser.raiseWithData (node_modules/@babel/parser/src/parser/error.js:55:17)
        at Parser.raise (node_modules/@babel/parser/src/parser/error.js:39:17)
        at Parser.unexpected (node_modules/@babel/parser/src/parser/util.js:149:16)
        at Parser.parseExprAtom (node_modules/@babel/parser/src/parser/expression.js:1174:20)
        at Parser.parseExprSubscripts (node_modules/@babel/parser/src/parser/expression.js:541:23)
        at Parser.parseMaybeUnary (node_modules/@babel/parser/src/parser/expression.js:521:21)
        at Parser.parseExprOps (node_modules/@babel/parser/src/parser/expression.js:312:23)
        at Parser.parseMaybeConditional (node_modules/@babel/parser/src/parser/expression.js:264:23)
        at Parser.parseMaybeAssign (node_modules/@babel/parser/src/parser/expression.js:212:21)
  
  Test Suites: 1 failed, 1 total
  Tests:       0 total
  Snapshots:   0 total
  Time:        2.234s
  Ran all test suites.
  </code></pre>
  <p>I'm trying to do this without ejecting, to not lose the benefits of CRA. I understand that if I eject I can do pretty much whatever I want.</p>