React-apollo: Importing test-utils breaks in tests when using react-app-rewired

[kylemellander]

Intended outcome:
To have react-apollo test utils import correctly in jest tests .

Actual outcome:

node_modules/react-apollo/test-utils.mjs:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import * as React from 'react';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)

it is breaking on this line in my test:

import { MockedProvider } from 'react-apollo/test-utils'

It looks to me like it is trying to pull in typescript from react-apollo and breaking on

How to reproduce the issue:

• create an app with create-react-app
• use "react-apollo": "2.1.0-beta.3"
• in a test, place import { MockedProvider } from 'react-apollo/test-utils'

Version

• [email protected]
• [email protected]

[mgonyan]

@kylemellander

I had a similar issue when I upgraded from [email protected] to [email protected]
I solved it by whitelisting react-apollo in my jest config in package.json:

"jest": {
    // ....
    "transformIgnorePatterns": ["<rootDir>/node_modules/(?!(react-apollo)/)"],
    // ....
}

The reason of this by default jest ingores node_modules folder, I found it here https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns-array-string, So whitelisting react-apollo could help. Hope this could help.

[mkaulig]

@mgonyan thanks for your workaround. Unfortunately the proposed solution does not work, if you are using create-react-app, because this option is not supported by create-react-app.

[mchandler-cng]

@mkaulig That solution is specific to react-app-rewired, as the title notes :)

[rosskevin]

transformIgnorePatterns and jest's ignoring/treatment of node_modules is well known and specified in the config referenced above by @mgonyan. The files you are breaking on are those discovered through the package.json modules, and they appear to me to be valid ES2015, therefore this is not a problem with the distribution. I understand it's still a problem for you, but that is external to this project.

If anyone has information contrary to my understanding, please let me know - I could be mistaken.

[rosskevin]

Also see Dan's notes here https://github.com/apollographql/react-apollo/issues/1663#issuecomment-378086510