运行玩笑测试时Apollo React Import不会转译

Question

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

Answer 1

You need to configure jest to handle es6 imports using babel-jest.

Add babel-jest to your project using the following command in your terminal.

npm install --save-dev jest babel-jest

In your jest.config.js file include the following under transform.

  transform: {
    "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
  },

Also make sure you are importing react-apollo correctly.

Currect version 2.1.9 at time of writing imports using the following syntax.

import { graphql } from 'react-apollo';

Answer 2

By default Jest won't transform the contents of your node_modules folder, where your installation of Apollo resides. There is a config option for Jest, called transformIgnorePatterns that provides the ability to change this behavior in order to transform some of your dependencies present in node_modules. In your case, you need to whitelist Apollo so that Jest transforms it before running your tests:

"transformIgnorePatterns": ["node_modules\/(?!(react-apollo))"]

What happens here is that Jest will ignore all the contents of node_modules except react-apollo, which will get transformed with Babel. That way you should stop seeing the error you are getting.