Жест, неожиданный импорт токена

Я начинаю новый проект реагирования, и я палочку использую Jest в качестве тестовой платформы. Несмотря на документы, блоги и многие другие ресурсы, такие как stackoverflow, у меня всегда есть ошибка "неожиданного импорта маркера", связанная, вероятно, с проблемой babel, но мой конфиг, похоже, в порядке. Любая помощь приветствуется.

My Jest conf (в пакете .json). У моего пакета .json есть зависимости, такие как babel-jest, babel-preset-es2015, babel-preset-react и т.д.

 "jest": {
    "testMatch": [
      "**/?(*.)spec.js?(x)"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "^lib/(.*)$": "<rootDir>/src/lib/$1",
      "^components/(.*)": "<rootDir>/src/components/$1",
    },
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    }

My.babelrc conf:

{
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "plugins": [
    ["react-hot-loader/babel"],
    ["transform-object-rest-spread", { "useBuiltIns": true }],
    ["transform-runtime"]
  ],
  "env": {
      "test": {
        "presets": ["es2015", "react"]
      }
  } 
}

Мой файл спецификации:

import React from 'react';
import Radio from 'components/ui/radio';
...

И компоненты /ui/radio (ошибка импорта возникает в первой строке):

import Container from './container.jsx';
...

У моего webpack есть два псевдонима с именем lib и components (определяйте как moduleNameMapper в шутке).

...
resolve: {
   mainFiles: ['index', 'main'],
   extensions: ['.js', '.jsx'],
   alias: {
     lib: helpers.getPath('src/lib/'),
     components: helpers.getPath('src/components/'),
   },
   modules: [
     helpers.getPath('src'),
     helpers.getPath('node_modules'),
   ],
}, 
...

Ответ 1

У меня была очень похожая проблема, и в конце я решил ее использовать только -no-cache при запуске jest.

Я также имел в своих зависимостях package.json, таких как babel-jest, babel-preset-es2015, babel-preset-реагировать и т.д.

jest --no-cache

Ответ 2

Предполагая, что вы сделали все, как обычно, и ничего не получается: измените расширения файлов с .jsx на просто .js. В то время как некоторые библиотеки/версии в моем проекте были в порядке с .jsx, другие - нет, и было .jsx пытаться выяснить, кто является причиной проблемы.

Вам не нужно следить за каждым обновлением каждого файла, к которому прикасается ваша команда, чтобы проверить, добавляет ли он JSX или удаляет последний бит JSX. На практике обычно добавлять и удалять его из файлов, как ваш код претерпевает изменения. Вы будете тратить много времени либо напоминать людям "эй, вы должны переименовать этот файл сейчас" вручную, либо на вас кричит Линтер, просто из-за крошечного изменения кода. И это открывает возможность одновременного foo.js как foo.js и foo.jsx - что будет потом? - Умный сотрудник

Если вы все еще хотите, чтобы подсветка и автозаполнение, которые ваша IDE дала вам для файлов JSX, вы сможете внести изменения в рабочее пространство для конкретного проекта. Для VSCode это так просто, как:

"files.associations": {
    "*.js": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
}

Ответ 3

Если вы столкнулись с этой проблемой после обновления до новой версии Jest, попробуйте очистить внутренний кеш Jest:

jest --clearCache