Create-response-app & jest - SyntaxError: неожиданный импорт токена

ПРИМЕЧАНИЕ: Я исправил это, переместив весь код из моей папки src/nod_modules непосредственно в папку src и удалив src/node_modules в соответствии с этой короткой цепочкой: https://github.com/facebook/create-react-app/issues/4241


Я использую приложение create-response-app, и у меня проблемы с запуском Jest.

Когда я пытаюсь импортировать любой из моих компонентов React в свой тестовый файл, я получаю сообщение об ошибке yarn test:

Test suite failed to run

.../src/node_modules/common/ErrorMessage.js:1
({"Object.<anonymous>":function(
module,exports,require,__dirname,__filename,global,jest)
{import React from 'react'
^^^^^^

SyntaxError: Unexpected token import

Вот как выглядит мой тестовый файл:

// test.test.js

// attempting to import
import ErrorMessage from '../node_modules/common/ErrorMessage.js'

// dummy test
test('adds 1 + 2 to equal 3', () => {
  expect(1 + 2).toBe(3)
})

Однако ошибка не возникает, если я нахожусь в корне файла src, импортируя свой index.js. В этот момент ошибка возникает в первом импортируемом index.js файле. Например:

test.test.js

import index from './index'

index.js

import React from 'react'
import { render } from 'react-dom'
import './style/index.css'
import LoginContainer from './node_modules/user/LoginContainer'
import NewUser from './node_modules/user/NewUser'
// etc.

терминальный выход

 FAIL  src/test.test.js
  ● Test suite failed to run

    /Users/hannahmccain/Desktop/DEV/expense-report/fullstack-expense-report/client/src/node_modules/user/LoginContainer.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React, { Component } from 'react'
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (src/index.js:11:164)
      at Object.<anonymous> (src/test.test.js:3:14)

Похоже, что в контексте Jest Babel не может правильно скомпилировать файлы в src / node_modules. Я просто не знаю, как это исправить! Любые идеи будут оценены.

К вашему сведению, Jest должен работать из коробки с приложением create-react-app, и я не хочу извлекать его. Без извлечения я не могу внести определенные изменения, которые рекомендовал в другом месте, например обновить настройки Jest в моем package.json.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
12
0
7 668
2

Ответы 2

Код внутри node_modules/user/LoginContainer.js не является производственной версией (версия с бабелизацией), поскольку в нем все еще есть этот оператор импорта.

Jest, который поставляется предварительно настроенным с помощью приложения create-react-app, исключает все внутри node_modules из babel-трансформации перед запуском тестов, предполагая, что код внутри node_modules будет предварительно бабелифицирован.

А поскольку ваш модуль внутри node_modules не бабелифицируется, jest выдает ошибку, как только встречает оператор импорта.

Решение

1. У вас должен быть скрипт сборки для вашего node_module. Попробуйте поместить производственную версию вашего модуля в node_modules. Это поможет, но также создаст дополнительные проблемы (согласно моему опыту).

2. Начать явную настройку jest и его зависимостей без извлечения. По сути, изменив ваш тестовый сценарий на jest --env=jsdom. Вам нужно будет явно установить jest, react-dom, babel-transforms- *, а затем настроить, используя конфигурацию jest внутри package.json.

Здесь нужно ориентироваться на два основных варианта конфигурации - transformIgnorePatterns и transform.

Короче говоря, трансформируйте все и игнорируйте все, что уже трансформировано.

Взгляните на раздел Jest конфигурация для получения более подробной информации.

спасибо за ответ! В итоге я просто удалил папку src/node_modules, так как это вызывало проблему, поэтому я не смог проверить ваше решение. если он сработает для кого-то еще, я отмечу его как принятый ответ!

haiba 03.04.2018 17:08

Я не уверен, не застрянет ли ваш шаг в ближайшем будущем. Ваши тестовые примеры для различных компонентов требуют, чтобы эти компоненты присутствовали в node_modules. Не могли бы вы опубликовать ссылку на ваш репозиторий, чтобы я рассмотрел и предложил вам точную конфигурацию?

Himanshu Singh 04.04.2018 06:01

Чтобы продолжить с ответом @Himanshu Singh, добавив его в мой package.json, я решил эту ошибку.

{
  test: react-scripts test --transformIgnorePatterns \"node_modules/(?!ui-core)/\" --env=jsdom
}

Спасибо !, это спасло меня от погружения в глубины извлечения и выполнения нестандартных конфигураций, сработало как шарм.

Luis Palacios 16.07.2020 17:01

Другие вопросы по теме