How to test npm package shipped as .tgz file in react using jest?

Question

I'm using a npm package shipped as .tgz file with in a react application. But when I try test a react component using jest which imports this package I'm getting the following error. Is there anything that I have to configure in jest to test this?


    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:

    D:\application\node_modules\@clientio\rappid\build\package\index.ts:14
    export * from './rappid';
    ^^^^^^

    SyntaxError: Unexpected token 'export'


    > 4 | import * as joint from '@clientio/rappid/build/package';
        | ^

      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/../hmy-component.js:4:1)

My package.json looks like below.

{
...
"dependencies": {
...
 "@clientio/rappid": "file:vendor/rappid-3.2.0.tgz"
...
}

My component looks like below.

...
import * as joint from '@clientio/rappid/build/package';
...

function MyComponent(props) {
  ...
}

Same error here and I've spent a few hours customizing Jest configuration (with CRA) without success. Have you found a way? — Spi, Mar 28 '21 at 19:16
Are you using rappid library? In my case I had this issue in trail version. It was resolved with licensed version — PNDev, Aug 23 '21 at 19:45

score 0 · Answer 1 · answered May 27 '22 at 12:36

A bit late with the answer, but maybe someone will find it useful.

The suggested solution by Jest in output above is the correct one. You should add transformIgnorePatterns to your Jest config.

If the app uses 'create-react-app', it can be added as an option in an npm script in package.json. I think some Jest config options are not available in 'create-react-app'. If you don't use 'create-react-app', you can just add it to the Jest config.

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!<package_name>)/\""

A similar stack overflow issue can be found here for reference.

How to test npm package shipped as .tgz file in react using jest?

1 Answers1