Question

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

构建/ dev to project
Babel to transile javascript / jsx files
Jest to run tests
测试我的反应成分的酶

问题：当我运行我的测试时，似乎Apollo反应客户端没有被转换并抛出测试：

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

Answer 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';

Answer 2

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

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

这里发生的是，Jest将忽略node_modules的所有内容，但react-apollo除外，后者将通过Babel进行转换。这样一来，您应该停止看到自己得到的错误。

在运行jest测试时，Apollo反应导入没有被转换

2 个答案: