Using ts-jest with create-react-app

Question

When using create-react-app with react-scripts-ts to use TypeScript, running the tests with the --coverage flag leads to incorrect coverage reports. Is there any way to integrate ts-jest so that the coverage reports will be accurate?

Below is my jest configuration in package.json :

"jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "mapCoverage": true,
    "coverageThreshold": {
      "global": {
        "branches": 100,
        "functions": 100,
        "lines": 100,
        "statements": 100
      }
    }
  }
}

Edit: This is the error message I am getting:

Out of the box, Create React App only supports overriding these Jest options:

  • collectCoverageFrom
  • coverageReporters
  • coverageThreshold
  • snapshotSerializers.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • transform
  • testRegex
  • moduleFileExtensions
  • mapCoverage

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.

Answer 1

Is there any reason you are using react-scripts-ts / ts-jest instead of regular out-of-the-box Create React App? It has been supporting TypeScript natively for a while now. I'd suggest doing that, as fighting against in the defaults of CRA is generally a pain point.