sindresorhus/react-extras

Jest fails to load files for version 2

0815Strohhut opened this issue · 2 comments

Hi,

I am using a react app with create-react-app using Typescript including Jest to run some unit tests with @testing-library/react that includes components that use "react-extras".

When updating the version of react extras from 1.0.1 to 2.0.0, I encountered the issue:

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:

    C:\rtc\products\ev_main\weert\prod\Anywhere\node_modules\react-extras\dist\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { default as autoBind } from 'auto-bind/react';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      4 | import { Trans } from "react-i18next";
      5 | import { FormLabelStyle } from "../../Theming/UserFormStyles";
    > 6 | import { If } from "react-extras";
        | ^
      7 | 
      8 | interface CubusUserFormGroupProps {
      9 |   labelI18nKey?: string;

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/Utilities/UserForms/CubusUserFormGroup.tsx:6:1)

Node version: 12.16.1

My first assumption would be that it is related to the change "Output build as ESM module (#14)", but honestly I don't know too much about it. Do I need to apply some custom transformation to it as suggested by the hint?

I would open an issue on Jest. This package correctly declares that it's an ESM module. Seems that Jest cannot handle that.

"type": "module",

Thanks for the really quick hint. I took a look into Jest and it seems like they are currently working on supporting es modules:

jestjs/jest#9430

I'll look into that.