How to use Mocha with Create-React-App and Typescript? Getting SyntaxError: Unexpected token import

Question

I started testing some simple JavaScript code in my create-react-app project with Jest but it was too slow on Windows, taking 15-20 seconds for a simple test in watch mode - so I switched to mocha, which was practically instant.

Then I switched a JavaScript file to TypeScript and got this error running the tests -

(function (exports, require, module, __filename, __dirname) { import assert from 'assert';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)

I eventually got it to work by changing the tsconfig.json file

"module": "esnext",

to

"module": "commonjs",

It worked --- for a while - but then the import error reappears after doing npm start - if you catch it in time before react-scripts clears the screen you can see the problem -

The following changes are being made to your tsconfig.json file: compilerOptions.module must be esnext (for import() and import/export)

So create-react-app is overwriting the "module" line - how do you fix this?

I followed the approach used in this question - How to configure react-script so that it doesn't override tsconfig.json on 'start'

In tsconfig.json, I added

  "extends": "./tsconfig-extensions.json"

in tsconfig-extensions.json I have

{
  "compilerOptions": {
    "module": "commonjs"
  }
}

But running npm test I get the same error on "import".

Is there a reason why this doesn't work, or a way around it?

Some more discussion here, with a suggestion to put the .ts files outside of src - https://github.com/facebook/create-react-app/issues/5508#issuecomment-449431287

Timer commented on Dec 21, 2018: We don't support you having TypeScript files side-by-side to JavaScript files. You either need to let Create React App compile TypeScript itself, or move your project files to a different folder. The options set are required because that's how our integration works -- you seem to be fighting against it instead of using it.

ArcticZeroo: I couldn't actually find any information at all about TS support in React aside from the blog post (and ended up just having to find relevant commits to adding the TS support to figure out what's going on) -- is there any kind of doc about it to start on? I'd be willing to write something up to go over the issues I faced migrating from 1.x to 2.1.x :)

Timer: There's no documentation right now except "Adding TypeScript" -- if you could propose something that'd be great, we're open to hearing any feedback.

The docs in question are here - https://facebook.github.io/create-react-app/docs/adding-typescript, which just says

Note: You are not required to make a tsconfig.json file, one will be made for you. You are allowed to edit the generated TypeScript configuration.

So if it's necessary, how do you set up the config so that you can have the Typescript files outside of src? Do they need to be compiled to js and put in src?

---

Edit: Some other things I've tried - using require instead of import, using Jest with WLS Ubuntu (maybe a little faster but not much), Jest with "testEnvironment": "node" - no faster.

I also tried just leaving npm start running and setting module to commonjs, but something must be wrong with my config, as now mocha ... --watch doesn't update on changes to the tests.

I think I'll just dev without tests for the moment - Jest is too slow - I lose my train of thought waiting for the tests to run...