React-apollo: Imported graphql from react-apollo@beta is undefined in Jest tests causing test to fail.

[jkdowdle]

Intended outcome:
Test suite should pass as normal.

Actual outcome:
Test is failing with the following output.

 FAIL  src/Comments.spec.js
  ● Test suite failed to run

    TypeError: (0 , _reactApollo.graphql) is not a function

      at Object.<anonymous> (src/Comments.js:26:70)
      at Object.<anonymous> (src/Comments.spec.js:5:17)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.323s
Ran all test suites.

  console.log src/Comments.js:5
    graphql undefined

How to reproduce the issue:

git clone https://github.com/jkdowdle/react-apollo-2.1.0-beta.2-issue.git
cd react-apollo-2.1.0-beta.2-issue/
yarn
yarn test
a # (to run all tests.)

Version

• [email protected]
• [email protected]

This works fine in the browser with no errors. When I log the imported graphql HOC from apollo-react the output is as expected. However as you can see, in the test suite it comes out as undefined. I am not sure If I am missing something obvious. And I didn't notice that this issue was already found.

Thanks a ton for all the work done on the apollo project.

[arahansen]

Also seeing this with jest on beta.2. Thanks for the hard work so far! Really excited about this update.

[arahansen]

Debugging this a little bit, it seems jest is pulling the .umd export and not finding the graphql method.

[nfantone]

@arahansen We are also seeing the same behaviour using latest beta + Jest.

[arahansen]

My current workaround for this issue is to add an alias in my babel config "react-apollo": "./node_modules/react-apollo/index.js"

[brandonmp]

was experiencing similar problem in a nextjs project with typescript. error message was

TypeError: Object(...) is not a function
  at Object.graphql

@arahansen 's solution did the trick

The full stack trace seems like a lot of babel and project noise, not clear where the problem is originating:

TypeError: Object(...) is not a function
    at Object.graphql (/mnt/c/Users/brand/code/admitbrain/components/SiteHeader/SiteHeader.js:475:5)
    at __webpack_require__ (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/webpack/bootstrap d24852051fb83aef3b86:21:1)
    at Object../components/SiteHeader/index.js (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/index.js:2705:73)
    at __webpack_require__ (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/webpack/bootstrap d24852051fb83aef3b86:21:1)
    at Object../components/Layouts/HeaderFooter.js (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/index.js:526:70)
    at __webpack_require__ (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/webpack/bootstrap d24852051fb83aef3b86:21:1)
    at Object../components/Layouts/index.js (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/index.js:876:72)
    at __webpack_require__ (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/webpack/bootstrap d24852051fb83aef3b86:21:1)
    at Object../pages/index.js (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/index.js:3354:78)
    at __webpack_require__ (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/webpack/bootstrap d24852051fb83aef3b86:21:1)
    at Object.2 (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/index.js:3914:18)
    at __webpack_require__ (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/webpack/bootstrap d24852051fb83aef3b86:21:1)
    at /mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/webpack/bootstrap d24852051fb83aef3b86:68:1
    at Object.<anonymous> (/mnt/c/Users/brand/code/admitbrain/.next/dist/bundles/pages/index.js:73:10)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at _callee$ (/mnt/c/Users/brand/code/admitbrain/node_modules/next/dist/server/require.js:33:46)
    at tryCatch (/mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
    at step (/mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /mnt/c/Users/brand/code/admitbrain/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
    at <anonymous>

[arahansen]

I think a new cut of the beta release would do the trick. I tested building the latest master locally, and was able to remove my babel alias, and everything was working again.

[mchandler-cng]

@arahansen Is everything working for you now using the Final 2.1 beta release from today? I'm still having the same issues.

[arahansen]

@mchandler-cng jest seems to be working for me now without the babel alias on beta 3.

[jkdowdle]

It also seems to be working for me as well.

However now with graphql 0.13.1 I am getting a new error in my test.

    /apollo-beta/node_modules/graphql/language/printer.mjs:8
    import { visit } from './visitor';
    ^^^^^^

    SyntaxError: Unexpected token import

      at new Script (vm.js:51:7)
      at Object.<anonymous>.Object.setPrototypeOf.__proto__ (node_modules/apollo-link/lib/bundle.umd.js:2:138)
      at Object.<anonymous> (node_modules/apollo-link/lib/bundle.umd.js:5:2)

[eokoneyo]

@jkdowdle did you find a fix to your issue, because I am experiencing the same thing with my tests;

 ● Test suite failed to run

    /project/node_modules/graphql/language/printer.mjs:8
    import { visit } from './visitor';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at node_modules/apollo-link/lib/bundle.umd.js:2:141
      at Object.<anonymous> (node_modules/apollo-link/lib/bundle.umd.js:5:2)