CommonJS Exports for Jest?

[krewllobster]

Using create-react-app, when trying to test a component that uses the component from grommet-controls, I receive the following error:

Details:

    [project-directory]/node_modules/grommet-controls/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './components/Avatar';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

      1 | import React from 'react'
      2 | import PropTypes from 'prop-types'
    > 3 | import Tag from 'grommet-controls'
        | ^
      4 | 
...

      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/app/atoms/BankFlagTag/FlagTag/FlagTag.js:3:1)

As far as I can tell from other issues with similar errors, this library does not have a commonJS export which would allow Jest to read it properly.

[atanasster]

Hi - I am not sure about the error, but I think you are not using the named imports :

import { Tag } from 'grommet-controls'

[krewllobster]

Hi there,

It turned out to be a Jest/Create-react-app issue. I was able to resolve by changing my test command from:

"react-app-rewired test"

to:

"react-app-rewired test --transformIgnorePatterns \"node_modules/(?!(grommet-controls))/\""

Jest assumes that all installed packages in node_modules has been transpiled to ES5, and if they aren't (which grommet-controls is not -- i.e. it does not have a dist folder containing transpiled exports) they need to be exempted from the default ignore pattern of "node_modules".

I by no means know 100% of what I'm talking about, but it appears that grommet-controls has a rollup config that would do the transpilation and put it in a "dist" folder. If you were to upload the package with a dist folder and with the module exports pointing to it, then this would not happen. For example, if you look at the index of the 'grommet' module, it is pointing to the components folder which is comprised of transpiled es5 code.

Either way, I've resolved on my end! Thanks.

[atanasster]

Thanks a lot, i will check on my end of i can also fix the rollup config