运行笑话测试时，Apollo 反应导入未转译答案

【问题标题】：Apollo react import not transpiled when running jest tests运行笑话测试时，Apollo 反应导入未转译
【发布时间】：2018-07-21 07:37:49
【问题描述】：

我目前正在使用 React 和 GraphQL Apollo 对我的新 React 项目进行试验。这是我的堆栈：

Webpack 构建/开发到项目
Babel 转译 javascript/jsx 文件
开玩笑地运行测试
酶来测试我的反应成分

问题：当我运行测试时，似乎 Apollo react 客户端没有被编译并抛出测试：

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)

我开玩笑的配置是：

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

我的 .babelrc 很简单：

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

我发现了这个问题https://github.com/facebook/jest/issues/3202，但该解决方案似乎不适用于我的项目。

你能帮帮我吗？

谢谢，

SLedunois

【问题讨论】：

标签： javascript reactjs jestjs react-apollo

【解决方案1】：

您需要配置 jest 以使用 babel-jest 处理 es6 导入。

在您的终端中使用以下命令将 babel-jest 添加到您的项目中。

npm install --save-dev jest babel-jest

在您的 jest.config.js 文件中，在 transform 下包含以下内容。

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

还要确保正确导入 react-apollo。

使用以下语法编写导入时的当前版本 2.1.9。

import { graphql } from 'react-apollo';

【讨论】：

【解决方案2】：

默认情况下，Jest 不会转换您的 Apollo 安装所在的 node_modules 文件夹的内容。 Jest 有一个配置选项，称为 transformIgnorePatterns，它提供了更改此行为的能力，以转换 node_modules 中存在的一些依赖项。在您的情况下，您需要将 Apollo 列入白名单，以便 Jest 在运行测试之前对其进行转换：

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

这里发生的情况是，Jest 将忽略 node_modules 的所有内容，除了 react-apollo，它将被 Babel 转换。这样你就不会再看到你遇到的错误了。

【讨论】：