React-apollo: Apollo react import not transpiled when running jest tests

[SLedunois]

Hi guys.

I'm currently experimenting an issue with my new React project using React and GraphQL Apollo. Here is my stack :

• Webpack to build/dev to project
• Babel to transpile javascript/jsx files
• Jest to run tests
• Enzyme to test my react components

The issue: When I run my tests, it seems that Apollo react client is not transpiled and throw tests :

pp/containers/App/__tests__/App.test.jsx
  ● Test suite failed to run

    /Users/utilisateur/Project/TrAVis/TrAVis/node_modules/react-apollo/graphql.js:19
    import { Component, createElement } from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      1 | import React, { Component } from 'react';
    > 2 | import graphql from 'react-apollo/graphql';
      3 | import { bool, object, shape } from 'prop-types';
      4 |
      5 | import getUserQuery from './query';

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.<anonymous> (app/containers/App/App.jsx:2:16)
      at Object.<anonymous> (app/containers/App/__tests__/App.test.jsx:4:12)

My jest configuration is :

module.exports = {
  verbose: true,
  moduleNameMapper: {
    '\\.(css)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest'
  }
};

and my .babelrc is simply :

{
  "presets": [
    "react", 
    "es2015"
  ]
}

I found this issue https://github.com/facebook/jest/issues/3202 but it seems that the solution doesn't work with my project.

Can you help me?

Thank you,

SLedunois

[rosskevin]

If you are on the beta, I suspect that it is trying to read the mjs files and you might need to mess with transformIgnorePatterns to get it right.

Here's my jest config (using typescript but much the same) - note that the alienfast/lodash are modules (not ES5):

module.exports = {
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  testMatch: ['<rootDir>/src/**/?(*.)test.ts?(x)'],
  moduleNameMapper: {
    '^react-native$': 'react-native-web',
  },
  transform: {
    '^.+\\.(j|t)sx?$': 'ts-jest',
    '^(?!.*\\.json$)': '<rootDir>/node_modules/@alienfast/build/config/jest/fileTransform.js',
  },
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!(lodash-es|@alienfast/ui)/).+\\.(mjs|js|jsx|ts|tsx)$',
  ],
  testEnvironment: 'jsdom',
  testURL: 'http://localhost',
  globals: {
    'ts-jest': {
      tsConfigFile: 'tsconfig.test.json',
    },
  },
  setupFiles: [
    '<rootDir>/node_modules/@alienfast/build/config/polyfills.js',
    '<rootDir>/src/config/jest/enzyme.ts',
    '<rootDir>/src/config/jest/i18n.ts',
  ],
  setupTestFrameworkScriptFile: '<rootDir>/node_modules/@alienfast/build/config/jest/testSetup.js',
  mapCoverage: true,
  collectCoverageFrom: ['src/**/*.{mjs,js,jsx,ts,tsx}'],
}

[bdchauvette]

I'm using create-react-app, which unfortunately doesn't let you configure the transformIgnorePatterns option.

If I'm understanding this correctly, this issue is being caused by 2.1.0 changing the module field from index.js to index.mjs. Because of facebook/jest#4637, the .mjs file is not transpiled, leading to the error above.

I tried changing the script from:

"test": "node --experimental-modules .bin/node_modules/react-scripts test"

...but I still ran into the same problem :slightly_frowning_face:

I totally understand that because this is an issue with jest not transpiling correctly, it's probably out of scope for react-apollo to fix. Unfortunately, I think that also means that react-apollo is incompatible with create-react-app until the version of jest used by create-react-app supports .mjs files :crying_cat_face:

[clentfort]

Any chance to delay the change to mjs until react-scripts/jest have added support for mjs? This prevents me from upgrading from 2.1.0-beta.2 to 2.1.0-beta.3, which I find very surprising.

[clentfort]

Seems this will be fixed in the next release. See #1801

[mbrowne]

This is fixed in react-apollo now but I still encountered it with the latest version of graphql.js. It looks like the real problem is in create-react-app though. See https://github.com/graphql/graphql-js/issues/1248 and https://github.com/facebook/create-react-app/pull/4085

[gaearon]

If your project is built with Create React App and not ejected, [email protected] should fix this.
Here is how to upgrade:

https://github.com/facebook/create-react-app/releases/tag/v1.1.2

Otherwise you can apply a similar fix yourself in your project config. Cheers!

[SLedunois]

Hi.

Thanks you all for your replies. React-apollo update fix it for me.

Thank you,

SLedunois