Create-react-app: TypeScript support makes test with certain deps fail

[lordi]

Is this a bug report?

Yes.

Certain dependencies (specifically carbon-charts) make the tests fail. The bug ist that the relevant settings for jest can not be overwritten. See https://github.com/carbon-design-system/carbon-charts/issues/126 for the correspondent issue at carbon-charts.

Did you try recovering your dependencies?

Yes

Steps to Reproduce

npx create-react-app test --typescript
cd test
npm i @carbon/charts --save
echo "import '@carbon/charts';" >> src/App.tsx
npm test

Expected Behavior

Tests should run fine.

Actual Behavior

 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 "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" 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 "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /tmp/test/node_modules/@carbon/charts/index.js:2
    import { BaseChart } from "./base-chart";
           ^

    SyntaxError: Unexpected token {

      25 | 
      26 | export default App;
    > 27 | import '@carbon/charts';
         | ^
      28 | 

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (src/App.tsx:27:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.65s

Reproducible Demo

See commands above.

[lordi]

Without the --typescript flag, tests run smoothly.

[Bnaya]

~For me its failing with any import on my test file,
Seems like the configuration (of babel-jest)chooses not to transpile them / not to transpile modules~
nevermind:
i was running yarn jest and not yarn test

[lordi]

My workaround is to change the test command in the package.json:

    "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@carbon/charts|@carbon/charts-react)/).+\\.(js|jsx|ts|tsx)$'",

It's not perfect, but works for us.

I think the user should be able to at least overwrite transformIgnorePatterns in jest key.

[whengely]

I am also getting this error for another package (internal pkg and lodash-es) and --transformIgnorePatterns does not work for me.

[johnridesabike]

I just experienced this same issue after adding Reason and Bucklescript to my CRA project:

● 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 "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" 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 "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /.../node_modules/bs-platform/lib/es6/caml_int32.js:3
    import * as Caml_builtin_exceptions from "./caml_builtin_exceptions.js";
           ^

    SyntaxError: Unexpected token *

Since we can’t change transformIgnorePatterns in the config, I tried @lordi’s suggestion by modifying the test command. It seems to be working:

"test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(bs-platform)/).+\\.js$'",

It would be great if CRA could support this out of the box or with an easier config option.

Edit: It seems like the custom test command may not work on Windows. It fails with this message:

/).+\.js$' was unexpected at this time.

[voliva]

In case someone doesn't want to use the inline command, another solution is adding it as a jest config override in package.json:

{
  ....,
  "jest": {
    "transformIgnorePatterns": [
      "/!node_modules\\/lodash-es/"
    ]
  }
}

It seems to be supported by CRA, from this line: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/utils/createJestConfig.js#L71