Аполлон реагирует на импорт, не переданный при выполнении шутливых тестов

Question

В настоящее время я экспериментирую с моим новым проектом React, используя React и GraphQL Apollo. Вот мой стек:

• Webpack для сборки /dev для проекта
• Babel для переноса файлов javascript/jsx
• Jest для запуска тестов
• Фермент, чтобы проверить мои реагирующие компоненты

Проблема: когда я запускаю свои тесты, кажется, что клиент реакции 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 для обработки импорта es6 с помощью babel-jest.

Добавьте babel-jest в свой проект, используя следующую команду в своем терминале.

npm install --save-dev jest babel-jest

В ваш файл jest.config.js включите следующее при преобразовании.

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

Также убедитесь, что вы правильно импортируете реагирующее приложение.

Исправьте версию 2.1.9 на момент написания импорта, используя следующий синтаксис.

import { graphql } from 'react-apollo';

Answer 2

По умолчанию Jest не преобразует содержимое вашего node_modulesпапка, в которой находится ваша установка Apollo. Для Jest есть опция конфигурации, называемая transformIgnorePatterns, которая предоставляет возможность изменить это поведение, чтобы преобразовать некоторые из ваших зависимостей, присутствующих в node_modules. В вашем случае вам нужно внести Apollo в белый список, чтобы Jest преобразовал его перед запуском ваших тестов:

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

Здесь происходит то, что Jest игнорирует все содержимое node_modules, кроме response-apollo, которое будет преобразовано с помощью Babel. Таким образом вы перестанете видеть возникающую ошибку.