Add support for ts-jest

[holtc]

Can support for ts-jest be added since the coverage reports are incorrect?

Would need to add support for at least "transform", "testRegex", "moduleFileExtensions", and "mapCoverage" in the jest options.

Example jest config from package.json:

"jest": {
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
}

EDIT: This is the following error message I receive:

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.

[DorianGrey]

We're already using ts-jest. The config here points to a typescript transformer, which is just exports the ts-jest preprocessor (little workaround for behavior between ejected and non-ejected projects. The error message you are receiving is raised here: https://github.com/wmonk/create-react-app-typescript/blob/master/packages/react-scripts/scripts/utils/createJestConfig.js#L72-L86 The overridable key list is intended by CRA, since these are proven to not cause any problems with the default setup even when modified. If you see any particular error with the current setup, please provide a reproduction example for it.

[holtc]

I'm a bit confused by the response.

So I followed the guide from here to create my project, and I have not ejected. Below are the relevant sections from my package.json:

  ...
  "scripts": {
     ...
    "coverage-test": "set CI=true && react-scripts-ts test --env=jsdom --coverage",
     ...
  },
  "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
      }
    }
  }
  ...

When I run npm run commit-test, the code coverage report is not correct.

I have 2 questions based on your response.

1) Do I even need the ts-jest specific configurations in "jest" in my package.json? (I'm guessing I do not) 2) Do I need to link to a specific typescript transformer? I think the mapping is not correct since the coverage report is not correct, e.g. import lines showing as not covered in tested files.

[chasebrewsky]

I've created a repository that reproduces this issue: https://github.com/chasepbrewer/react-scripts-ts-coverage-bug

Here's how I set up the project:

$ create-react-app coverage-test  --scripts-version=react-scripts-ts --use-npm

After that, I created the utilities.ts and utilities.test.ts. I tested the function tested() but not untested(). After that I ran npm test -- --coverage and received this following output for the utilities.ts file:

The coverage looks to be mapping to the compiled typescript code instead of the source code. I've had this issue with other build systems I've created. I've typically fixed this for Jest in the past by adding mapCoverage: true to the Jest configuration in package.json, but this configuration is not allowed under the current create-react-app settings without ejecting.

[holtc]

After some poking around, I believe this can be fixed by adding --mapCoverage to the test runner:

"scripts": {
   ...
  "coverage-test": "set CI=true && react-scripts-ts test --mapCoverage --env=jsdom --coverage",
   ...
}

I feel like this is something that should be enabled by default when the --coverage flag is passed. What do you think?

[chasebrewsky]

I created a pull request for this: #256

[DorianGrey]

@holtc :

1. In general, these is no need for manual configuration in this entry, which is somewhat restricted anyway.
2. No, you don't.

Regarding the mapCoverage thing: It's correct that this option is required for correctly mapping coverage to the typescript sources. Atm., it is not enabled by default since it caused problems with mixed projects (i.e. mixed ts and js) that contain js files which are not transpiled: errors are raised because an attempt is made to map the executed code back to its origin, but not sourcemap exists. See this PR: https://github.com/wmonk/create-react-app-typescript/pull/240 Fortunately, some work has been done on including babel transpilation for the project's js files (thanks @GeeWee), so this problem might no longer exist or at least no longer affect. I'll see if I can take a closer look. Until then, it's perfectly valid to just pass --mapCoverage on the call to react-scripts-ts test - the parameter gets forwarded to jest directly. Besides, this works for almost every parameter jest accepts via argv, even those that are not whitelisted in the programmatical config creation.

[DorianGrey]

The mapCoverage issue should no longer be a problem when updating jest to 22.4 or above - due to the changelog, this option was deprecated, and now works out of the box in case source maps got produced in the transformation steps.

[Kaffiend]

Coverage appears to be working but also complaining about js files that are created initially, All subsequent builds honor the outDir and it silences the converage complaints if you remove them so i guess the only issue is the initial js files created on project initialization. Everything else seems to be working fine with testing now.