React-apollo: trying to import `react-dom/server ` when running jest tests

[peterp]

It seems that react-apollo is trying to import react-dom/server whilst trying to run my jest tests.

 FAIL  __tests__/index.android-tests.js
  ● Test suite failed to run

    Cannot find module 'react-dom/server' from 'react-apollo.umd.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at node_modules/react-apollo/react-apollo.umd.js:2:191
      at Object.<anonymous> (node_modules/react-apollo/react-apollo.umd.js:5:2)

[jbaxleyiii]

@peterp is this for a react-native app (I'm assuming because of the index.android). What env do you have set? Currently the entry point imports the code for SSR, however we have a browser entry point. Can you set the environment for your tests to be browser? We used to ship react-dom as a dep but that caused other troubles with both react-native and react 16.

I'd love to figure out how to make this better!

[peterp]

Yup! It's react native, I'm using the standard preset: https://github.com/facebook/react-native/blob/master/jest-preset.json.

I've changed testEnviroment to "jsdom" and "browser" as suggested here: https://facebook.github.io/jest/docs/configuration.html#testenvironment-string, but the problem persists.

Installing react-dom (16.0.0-alpha.12) as a devDependency solved the problem. React native's packager exposes this <filename>.ios|android.js mechanism to target specific environements, I'm wondering if that's helpful?

[lettertwo]

FWIW, I've managed to work around this problem by aliasing react-apollo using the babel module resolver plugin:

in .babel.rc:

{
  "presets": ["react-native"],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "react-apollo": "react-apollo/react-apollo.browser.umd.js"
      }
    }]
  ]
}

[Philip-Nunoo]

Having the same issue here.

[mvaivre]

Same here. @lettertwo workaround didn't work for me.... Would be nice to find another solution than adding react-dom as a devDependency!

[enesTufekci]

>

"plugins": [
    ["module-resolver", {
        "alias": {
        "react-apollo": "./node_modules/react-apollo/react-apollo.browser.umd.js"
        }
    }]
  ]

that worked for me

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[DavidKongDesheng]

same issue here

[7ynk3r]

for people out there, trying to do integration tests from jest in react-native without runing the app, i have to tell you that there's no happy end

1. using the following works great for testing but breaks the app run-time.

"plugins": [
    ["module-resolver", {
        "alias": {
        "react-apollo": "./node_modules/react-apollo/react-apollo.browser.umd.js"
        }
    }]
  ]

1. using this one will break the tests, it won't be able to contact the servers correctly.

  "jest": {
    "browser": true,
    [...]
  }

btw, import { MockedProvider } from 'react-apollo/test-utils'; won't work with 1

a few options:

1. mock fetch (https://github.com/jefflau/jest-fetch-mock)
2. mock apollo (http://dev.apollodata.com/tools/graphql-tools/mocking.html)
3. skip apollo, provide data directly to the component.
4. run the application e2e.

(i'll update this with new findings)

[larryranches]

@7ynk3r I'm also having this issue with react-native. Can you provide this best option?

[7ynk3r]

@larryranches

i was able to make it work with

  "jest": {
    "browser": true,
    [...]
  }

you'll have to install react/dom as a devDependency and https://github.com/pwnall/node-xhr2 to have support for fetch.

still i've opted to export all components without apollo

export Component; // <--
export default graphql(QUERY, Component);

and then unit test it, passing a mock. as long as you don't have a lot of transformations in variables or props you should be fine.

[larryranches]

@7ynk3r Thank you so much! I think I kind of got this to work with your info. I'm going to play with this a little bit more and let you know if I hit a roadblock or questions or even some of your best practices with this approach if you don't mind.

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[richardgirges]

This is still a relevant issue with some pretty ugly workarounds. Please don't close this stalebot.

[geirman]

I'm also having this issue. I tried the plugins work around above, but that slows down the tests and also doesn't resolve the issue. It just threw a different error related to ./node_modules/react-apollo/react-apollo.browser.umd.js

Mine is an expo react native app with babel-preset-expo preset.

[jaredly]

I'm in react-native and had this problem too, and I was able to do

jest.mock('react-dom/server', () => {}, {virtual: true})

and it worked just fine!

[mxmzb]

Still having this issue on an Expo (RN) app. Basically same as @geirman said.

[bryantAXS]

Any updates on this one? Are people still having the issue?

[KrifaYounes]

I have this error when I try to import react-apollo on a lambda in aws
Are people still having this issue?

Unable to import module 'lambda': Error
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at /var/task/node_modules/react-apollo/react-apollo.umd.js:2:152
at Object.<anonymous> (/var/task/node_modules/react-apollo/react-apollo.umd.js:5:2)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)

[hwillson]

This issue has been resolved in current day versions of react-apollo. Thanks!