Jest: Неожиданный импорт токенов для модулей ES6

У меня такая же проблема с React-Native и Jest,
Если вы начинаете новый проект с:
реагировать-native init AwesomeProject
cd AwesomeProject

затем установите такой модуль, как npm install native-base --save
импортировать любой компонент из native-base в ваш файл index.ios.js

npm test выдаст эту ошибку:
../test/node_modules/native-base/index.js:4
импортировать ящик из './Components/vendor/react-native-drawer';
^^^^^^
SyntaxError: неожиданный импорт токена

См http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns -Кастомизация

У меня такая же проблема, ссылка @cpojer , похоже, не помогает 😕

Привет! 'transformIgnorePatterns' делает .... мммм ... что он должен делать - игнорируя)
Но как я могу использовать этот импорт в пакете из node_modules?

Этот реквизит мне помог :)

{
  "jest": {
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"]
  },
}

UPD1
В настоящее время моя конфигурация Jest:

"jest": {
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest",
      "^.+\\.(css|scss|less)$": "jest-css-modules"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules",
      "src/frontend",
      "src/shared"
    ]
  },

... и у меня это работает :)

С уважением, Павел Третьяков

Привет, ребята, я все еще сталкиваюсь с этой проблемой, но я не использую react native. Проблема всегда решается с помощью jest --no-cache. Есть ли способ заставить шутку работать с использованием кеша, не выдавая эту ошибку?

Я не могу заставить это преобразование работать с моим приложением create-react-app. Всегда получайте сообщение «Неожиданный импорт токена» в любых тестовых файлах, содержащих импорт ES6. Я перепробовал все предложения, которые смог найти. no-cache не влияет. Я, очевидно, не могу игнорировать эти файлы из преобразования (их нужно преобразовать!).

Я сдаюсь. С радостью предоставим любую необходимую информацию.

Кажется, я тоже столкнулся с этой проблемой.

То же самое

То же самое

Вы все, вероятно, столкнетесь с этой проблемой, потому что модули ES не поддерживаются в Node, и вы намеренно остановили их компиляцию с помощью конвейера сборки (веб-пакет, накопительный пакет), когда вы отправляете их в браузер.

Вам необходимо включить компиляцию из модулей ES в CommonJS для «тестового» env в вашем babelrc, см. Https://babeljs.io/docs/usage/babelrc/#env -option и https://babeljs.io/docs/ плагины / преобразование-es2015-модули-commonjs /

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Спасибо за ответ, cpojer. Вчера я удалил настройки узла env и позволил ему работать с узлом env по умолчанию, потому что jest работал глобально, но не при использовании сценариев узла. Казалось, что проблема решена, поэтому я считаю, что моя проблема была связана с настройками node-env. Но все равно есть за чем следить.

РЕДАКТИРОВАТЬ: это вообще не сработало. Исправление @cpojer сработало как шарм. Спасибо.

Исправление @cpojer сработало для меня, спасибо

Отлично, у меня тоже сработало, спасибо!

У меня аналогичная проблема в моем довольно простом приложении для реагирования.

При запуске npm test или jest возвращается 'SyntaxError: Unexpected token import'

.babelrc

{
"presets": ["react-native"]
}

.package.json

{
  "name": "BeeAppy",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-jest": "^20.0.3",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-native": "^2.0.0",
    "enzyme": "^2.8.2",
    "eslint": "^4.0.0",
    "eslint-plugin-react": "^7.1.0",
    "jest": "^20.0.4",
    "react-addons-test-utils": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-test-renderer": "^16.0.0-alpha.6"
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "react-native"
  },
  "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.44.0",
    "react-navigation": "^1.0.0-beta.11"
  }
}

Включается ли фрагмент env, предложенный
Извините, если это действительно очевидно!
Любая помощь была бы замечательной, спасибо

@JessicaBarclay он должен быть в вашей конфигурации .babelrc. Нравится:

"env": {
          "development": {
                 "plugins": ["transform-es2015-modules-commonjs"]
          }
}

Ах, спасибо @rlage ! Сортировано :)

FWIW, у меня на самом деле был настроен мой .babelrc с правильными presets и plugins в тестовой среде, как предлагал NODE_ENV=test в строке моих сценариев в package.json .

Раньше ошибка «Неожиданный импорт токена»:

"scripts": {
  ...
  "test": "jest",
}

После успешного преобразования файлов:

"scripts": {
  ...
  "test": "NODE_ENV=test jest",
}

@jlyman

Судя по документации Jest, в этом нет необходимости, поскольку Jest устанавливает NODE_ENV для проверки по умолчанию.

Примечание. Если вы используете более сложную конфигурацию Babel, используя параметр env Babel, имейте в виду, что Jest автоматически определит NODE_ENV как test. Он не будет использовать раздел разработки, как это делает Babel по умолчанию, если не установлен NODE_ENV.

Этот .babelrc - это то, что сработало для меня:

{"env": {
    "development": {
        "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
    }
}}

ПРИМЕЧАНИЕ: это выглядит странно, но должны присутствовать ключи разработки и тестирования , иначе это не сработает.

Тогда я просто звоню:

node_modules/.bin/jest

или с package.json:

{"scripts": {"test": "jest"}}

Нет необходимости настраивать NODE_ENV для тестирования.

@laszbalo Интересно, что присутствие второго env , похоже, помогает. Если я добавлю среду разработки и уберу явный префикс NODE_ENV в своих сценариях, он

@jlyman какое решение в документации?

@doudounannan Извините, если это не ясно. Решение, к которому я пришел, было тем, что я разместил здесь . Как сказал @laszbalo , это противоречит тому, что говорится в документации в разделе Использование Babel , но либо решение @laszbalo , либо моя прямая инъекция NODE_ENV test похоже, работают.

Как ни странно, когда я использую "transformIgnorePatterns": [ ] тогда babel преобразует мои проверенные файлы, но если я исключаю параметр transformIgnorePatterns тогда babel ничего не делает ... У меня есть простой .babelrc только для тестирования (я использовать webpack для продакшена, но не для шутливых тестов):

{
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

Я получил идею из https://github.com/facebook/jest/issues/2550#issuecomment -290812720, поскольку ничто другое в # 770 или здесь, похоже, не помогло ...

Неважно, что я делаю, всегда одна и та же ошибка:

    /.../node_modules/@expo/react-native-action-sheet/ActionSheet.ios.js:3
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)
      at Object.<anonymous> (node_modules/react-native-gifted-chat/src/GiftedChat.js:10:29)

{
  "env": {
    "production": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "development": {
      "plugins": ["transform-es2015-modules-commonjs"]
    },
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  },
  "presets": [
    "react-native"
  ],
  "plugins": [
    ["module-resolver", {
            "cwd": "babelrc",
        }]
  ]
}

"jest": {
    "preset": "react-native",
    "setupFiles": [
        "./__tests__/setup.js"
    ],
    "testRegex": "/__tests__/.*\\.spec\\.js$"
}

У меня такая же проблема. Я добавил к своей шутке следующее

"jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
          "node_modules/(?!react-native|react-navigation)/"
      ]
  }

и теперь я получаю следующую ошибку при запуске Jest:

ReferenceError: Неизвестный плагин «transform-replace-object-assign», указанный в «/Users/caalcaz/Documents/Projects/Enterprise-app/node_modules/enzyme/.babelrc» в 0, попытался разрешить относительно «/ Users / caalcaz / Документы / Проекты / Enterprise-приложение / node_modules / энзим »

@calcazar, что находится в вашем node_modules / ферменте / .babelrc?

Я решил это с помощью babel-jest _and_ ts-jest. В package.json:

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "globals": {
        "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleFileExtensions": [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json"
    ],
    "transform": {
        "^.+\\.jsx?$": "babel-jest",
        "^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest
    "testRegex": "test/.*\\.spec\\.ts$",
    "setupFiles": [
        "<rootDir>/test/jest-pretest.ts"
    ],
    "testEnvironment": "node",
    "moduleNameMapper": {
        "aurelia-(.*)": "<rootDir>/node_modules/$1"
    },
    // some coverage and results processing options
},

Затем в .babelrc (который я использую только для тестирования)

{
    "env": {
        "test": {
        "plugins": ["transform-es2015-modules-commonjs"]
        }
    }
}

надеюсь, что это поможет кому-то! (Это для приложения Aurelia, поэтому YMMV)

@thinkOfaNumber

Вот что я вижу. К вашему сведению, я использую Enzyme V3.0

{
  "presets": ["airbnb"],
  "plugins": [
    ["transform-replace-object-assign", "object.assign"],
  ],
}

@thinkOfaNumber благодарим вас за размещение вашего предложения. Я использовал его, чтобы выяснить, как получить модули es6 из внешней библиотеки для компиляции в шутку. Ключ здесь

"jest": {
    "modulePaths": [
        "<rootDir>/src",
        "<rootDir>/node_modules"
    ],
    "transformIgnorePatterns": ["/node_modules/(?!lodash-es)"], // <-- this allows babel to load only the node modules I need (which is lodash-es) and ignore the rest

Это та часть, которая мне нужна. Большое спасибо!

@rochapablo там же. При удаче?

Нет, пока я игнорирую конкретный тест файла, который выдает ошибку

Следующий. У меня такая же проблема, и пока ничего не решает.

Следуя тоже

@rochapablo Удалось ли вам решить эту проблему?
Я также не могу протестировать компонент, у которого есть GiftedChat в качестве дочернего из-за проблемы, о которой вы упомянули ...

@todorone , попробуйте добавить:

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo Спасибо за подсказку, но, к сожалению, это не помогло. Я даже пробовал играть дальше с регулярными выражениями transformIgnorePatterns но это не помогло.

"transform": { "^.+\\.js$": "babel-jest", "^.+\\.jsx?$": "babel-jest" },
добавить вышесказанное в шутку

@rochapablo Вы пробовали предустановку jest-expo ? При удаче? У меня возникла еще одна синтаксическая проблема с ним & transformIgnorePatterns

У меня все еще не работает. Получаю чертову ошибку импорта.

@testacode - это динамический import , добавили ли вы необходимый плагин babel? См. Нижнюю часть https://facebook.github.io/jest/docs/en/webpack.html#using -with-webpack-2

@SimenB спасибо, вот чего мне не хватало!

Это интересно. Некоторое недавнее обновление удалило автоматическое добавление babel-jest. Так работает:

npm install babel-jest --save-dev

и добавление НИЧЕГО ДРУГОГО в конфигурации устранило проблему для меня. Я думаю, в сообщении об ошибке должно быть более ясно, что он больше не включен ...

Решил просто установкой babel-jest:
npm i babel-jest

Также не забудьте создать файл .babelrc со следующим содержимым:

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

Это работает для меня:

.babelrc :

{
    "presets": ["env", "stage-3"],
    "plugins": ["transform-class-properties"]
}

package.json :

"scripts": {
    "test": "jest --forceExit"
},
"devDependencies": {
    "babel-core": "^6.11.4",
    "babel-jest": "^21.2.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-3": "^6.24.1",
    "jest": "^21.2.0"
}

@hqro у меня сработало, спасибо 👍

Для меня это было в моем файле .babelrc :

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ]
}

И мне только нужно было убедиться, что в «тестовой» среде вместо этого используются модули:

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "presets": ["react", "env"],
    }
  }
}

@nemoDreamer Лучше не повторять плагины и пресеты в одном конфиге

{
  "presets": ["react", ["env", { "modules": false }]],
  "plugins": [ ... ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"],
    }
  }
}

Что бы я ни пробовал, у меня возникает ошибка.

> cross-env NODE_ENV=test jest --no-cache

 FAIL  src\views\Pay\__tests__\Pay.test.js
  ● Test suite failed to run

    C:\Users\***\Documents\Project\***\node_modules\ne-rc\lib\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Alert from './Alert';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

      11 |  * <strong i="6">@param</strong> {Array<Object>} [data] 每一种分期的详细信息 data=[{},{}...]
      12 |  * <strong i="7">@param</strong> {Number} [defaultSelected] 默认选中的下标
    > 13 |  * <strong i="8">@param</strong> {Funtion} [onClick] 点击触发事件
      14 |  * <strong i="9">@param</strong> {Number} [columnNum] 一行有多少列
      15 |  *
      16 |  * <strong i="10">@example</strong>

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (src/components/Installment/Installment.jsx:13:13)
      at Object.<anonymous> (src/components/Installment/index.js:8:20)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.693s

Вот мои файлы конфигурации.

* .babelrc *

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    // webpack understands the native import syntax, and uses it for tree shaking

    "es2015",
    "stage-2",
    // Specifies what level of language features to doPay.

    // Stage 2 is "draft", 4 is finished, 0 is strawman.

    // See https://tc39.github.io/process-document/

    "react"
    // Transpile React components to JavaScript
  ],
  "env": {
    "test": {
      "presets": ["env", "react", "stage-2"],
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    }
  }
}

package.json

{
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development node ./server/server.js",
    "api": "cross-env NODE_ENV=api node ./server/server.js",
    "clean": "rm -rf dist",
    "dist": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --progress --colors",
    "online": "cross-env NODE_ENV=development node ./server/online.js",
    "lint": "node ./node_modules/eslint/bin/eslint.js ./src --fix",
    "test": "cross-env NODE_ENV=test jest --no-cache",
    "test:watch": "npm test --watch",
    "stats": "npm run clean && cross-env NODE_ENV=production webpack --config ./webpack/index.js --profile --json > stats.json",
    "gatest": "node ./service/gatest.js"
  },
  "pre-commit": [
    "lint"
  ],
  "jest": {
    "verbose": true,
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "setupFiles": [
      "./test/setup.js"
    ],
    "moduleFileExtensions": [
      "js",
      "jsx",
      "json",
      "md"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "testEnvironment": "jsdom"
  },
  "devDependencies": {
    "asset-inject-html-webpack-plugin": "^0.9.1",
    "autoprefixer": "^7.1.3",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-jest": "^22.4.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-jest": "^22.4.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "better-npm-run": "0.1.0",
    "body-parser": "^1.17.2",
    "chalk": "^2.1.0",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.5",
    "deepmerge": "^2.0.1",
    "enzyme": "^3.3.0",
    "eslint": "^4.5.0",
    "eslint-config-standard": "^11.0.0-beta.0",
    "eslint-config-standard-jsx": "^4.0.2",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "exports-loader": "^0.6.4",
    "express": "^4.15.4",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.6",
    "git-repo-info": "^1.4.1",
    "glob": "^7.1.2",
    "happypack": "^4.0.1",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "idb": "^2.0.4",
    "imports-loader": "^0.7.0",
    "jest": "^22.4.2",
    "lodash.range": "^3.2.0",
    "mocha": "^5.0.0",
    "node-sass": "^4.5.3",
    "node-xlsx": "^0.11.2",
    "postcss-loader": "^2.0.6",
    "pre-commit": "^1.2.2",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-test-renderer": "^16.2.0",
    "redux-logger": "^3.0.6",
    "regenerator-runtime": "^0.11.1",
    "request": "^2.74.0",
    "require-reload": "^0.2.2",
    "rimraf": "^2.6.0",
    "sass-loader": "^6.0.6",
    "script-loader": "^0.7.0",
    "sinon": "^4.2.0",
    "style-loader": "^0.19.1",
    "uglify-js": "^3.0.28",
    "url-loader": "^0.6.2",
    "webpack": "^3.5.5",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^2.0.4",
    "webpack-dev-server": "^2.7.1",
    "webpack-hot-middleware": "^2.18.2",
    "webpack-merge": "^4.1.0",
    "worker-loader": "^1.1.0"
  }
}

@kisnows https://stackoverflow.com/questions/46065371/reactjest-syntaxerror-unexpected-token-import
https://segmentfault.com/n/1330000012786721

При установке предустановки в .babelrc убедитесь, что "env" заключен в квадратные скобки ["env"] , например:

  "env": {
    "test": {
      "presets": [["env"], "stage-2"],
      "plugins": ["transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }

особенно если в вашей конфигурации "modules: false" .

Кроме того, по умолчанию jest НЕ преобразовывает файлы в node_modules , cf https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns -array-string

Поэтому любые import ... не будут работать в файлах node_modules . Чтобы отключить это, вы можете добавить:

transformIgnorePatterns: []

в вашу шутливую конфигурацию.

Надеюсь это поможет!

@florentchauveau Спасибо, эта работа для меня.

@todorone @rochapablo Ребята, вы нашли решение для этого? Даже я столкнулся с той же проблемой -

    import * as React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:316:17)
      at Object.<anonymous> (node_modules/@expo/react-native-action-sheet/index.js:1:107)

Я получаю эту ошибку только при тестировании компонентов, использующих
GiftedChat - https://github.com/FaridSafi/react-native-gifted-chat.
Может быть, это потому, что @expo/react-native-action-sheet поставляется как модуль ES6, а GiftedChat использует его внутри? Но jest / ts-jest (я не уверен) должен справиться с этим, если будут добавлены предустановки. Вот моя конфигурация Jest -

    "jest": {
        "preset": "react-native",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js"
        ],
        "transform": {
            "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
            "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
        },
        "transformIgnorePatterns": [
            "node_modules/(?!rn-placeholder|react-native|react-navigation|native-base|react-native-datepicker|native-base-shoutem-theme|@shoutem/animation|@shoutem/ui|tcomb-form-native)"
        ],
        "setupTestFrameworkScriptFile": "<rootDir>/src/__mocks__/Adapter.js",
        "testRegex": "(\\.(test|spec))\\.(ts|tsx|js)$",
        "testPathIgnorePatterns": [
            "\\.snap$",
            "<rootDir>/node_modules/",
            "<rootDir>/lib/"
        ],
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
        },
        "cacheDirectory": ".jest/cache"
    },

и .babelrc -

{
    "presets": ["react-native"]
}

Я перепробовал почти все решения, упомянутые выше. Ни один из них не сработал в моем сценарии. Нужна помощь.

@ omkarjoshi-cc единственное, что у меня работало в то время, когда я работал, было добавление пакета, который вызывал ошибку, которая в моем случае была:

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat)/"
]

@rochapablo Ага. Я попробовал. Не сработало. Есть ли что-то еще, что можно упустить? Это действительно расстраивает 😓

Я использую babel 7, и мне тоже все еще не повезло с "transformIgnorePatterns" - пробовал много разных регулярных выражений: /

У меня проблема в том, что в одной зависимости есть собственные классы es6, и у меня есть класс в моем источнике, который ее расширяет. Поскольку «классы es5», переданные Babel, не могут расширять собственный класс, я получаю ошибку времени выполнения в шутку.

Я начал думать, что каким-то образом «babel / preset-env» мешает переносу кода в jest (целевой узел), который может не соответствовать целям браузера, но все еще не уверен в этом.

Кто-нибудь знает, как принудительно использовать es5 для шутки при использовании 'present-env' в .babelrc?

Единственный обходной путь, который я могу придумать, - это не использовать babel-jest, запускать webpack (который использует babel-loader и правила, в которые файлы для преобразования работали для меня), а затем запускать jest -> Я думаю об использовании webpack -w и в шутку смотри транспилированный ..)

Добавление

"transformIgnorePatterns": [
      "node_modules/(?!react-native-gifted-chat|@expo/react-native-action-sheet)"
]

работал у меня. Спасибо @rochapablo 🙌

Я борюсь с этой проблемой. Должна ли моя тестируемая выходная папка быть синтаксисом ES6 с import т. Д. Или можно не тестировать это? Я не вижу никаких commonjs в моем выходном файле / файлах (используя его с react-native)

Я столкнулся с той же проблемой, и эта страница решает проблему:
https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/

По какой-то причине вместо babel-jest использование следующего заставило меня работать (очевидно, уважайте transformIgnorePatterns )

"transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "ts-jest-babel-7"
    }

кстати, эту проблему следует снова открыть здесь, верно? многие люди сталкиваются с трудностями

В моем случае оказалось, что эта проблема была вызвана игнорированием тестовых файлов в моей конфигурации babel. По другим причинам в моем .babelrc было "ignore": ["**/*.test.js"] .

Решение заключалось в том, чтобы установить параметр игнорирования только для производственной среды, то есть:

"env": {
    "production": {
      "ignore": [
        "**/*.test.js"
      ]
    }
  }

В качестве альтернативы вы можете указать специальный шаблон игнорирования для тестовой среды.

После долгих испытаний вот мой случай

1. Убедитесь, что у вас правильные версии babe-jest *
2. убедитесь, что у вас есть конфигурация .babelrc с предустановками (ранее установленными)
3. Если по-прежнему выдается ошибка «неожиданный токен», возможно, это функции стрелок, которые не распознаются, этот плагин babel поможет вам «transform-class-properties» также включить их в вашу конфигурацию babel.

вот мои конфиги.

.babelrc

{
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-class-properties"
  ]}

для фермента (setupTests.js)

import { configure } from "enzyme";
import Adapter from "enzyme-adapter-react-15";
configure({ adapter: new Adapter() });

package.json

 "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "eslint": "^4.19.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-test-renderer": "^15.6.2",
     "babel-jest": "^22.4.3",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-15": "^1.0.5",
    "gh-pages": "^0.12.0",
    "jest": "^22.4.3",
    "react-addons-test-utils": "^15.4.2",
    "regenerator-runtime": "^0.11.1"
  },
"jest": {
    "globals": {
      "NODE_ENV": "test"
    },
    "verbose": true,
    "moduleDirectories": ["node_modules", "src"],
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "moduleFileExtensions": ["js", "jsx"],
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
  }

yarn add --dev babel-jest babel-core regenerator-runtime добавление, это сработало для меня

В моем случае это была проблема с окнами и их глупыми разрешениями, вероятно, неправильная установка переменных env.
Перешел с git bash на повышенный cmd.exe и снова начал работать.

У меня jest определено как script (переименовано в test:jest в test ) в моем package.json . Однако при запуске npm run test я получаю SyntaxError: Unexpected token import :

root<strong i="14">@browserify</strong>:/var/machine-learning/src# npm run test

> [email protected] test /var/machine-learning/src
> jest --config /var/machine-learning/test/jest/jest.config.js

 FAIL  ../test/jest/__tests__/layout/analysis.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/analysis.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/layout/page.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/layout/page.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/register.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/register.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

 FAIL  ../test/jest/__tests__/content/login.test.jsx
  ● Test suite failed to run

    /var/machine-learning/test/jest/__tests__/content/login.test.jsx:6
    import React from 'react';
    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (../../src/node_modules/jest-runtime/build/script_transformer.js:316:17)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |        0 |        0 |        0 |        0 |                   |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 4 failed, 4 total
Tests:       0 total
Snapshots:   0 total
Time:        3.782s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `jest --config /var/machine-learning/test/jest/jest.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2018-05-08T01_50_42_754Z-debug.log

Я также определил соответствующий jest.config.js :

module.exports = {
  'verbose': true,
  'collectCoverage': true,
  'coverageDirectory': '/var/machine-learning',
  'moduleDirectories': ['/var/machine-learning/src/node_modules'],
  'transformIgnorePatterns': [
    '/var/machine-learning/src/node_modules'
  ]
}

Я вижу много вещей о react-native и transformIgnorePatterns . К счастью и к несчастью, я этим не пользуюсь. Какая неуловимая ошибка. Нужно ли мне определять .babelrc или добавлять директиву jest в мой package.json . Как моя шутка script знает о babel, если это так? Я попытался добавить .babelrc в тот же каталог, где находится мой package.json , но безуспешно:

{
  "env": {
    "test": {
      "presets": ["env", "stage-2", "react"]
    }
  }
}

Примечание: если кто-то хочет отслеживать мою исходную проблему, связанную с вышеуказанной проблемой.

После долгого обдумывания я обнаружил следующие проблемы:

• По умолчанию Jest запускает babel 6. Babel 6 не ищет файл .babelrc.js . Только для файла .babelrc . Если у вас есть конфигурация JS вместо JSON, она не будет читать конфигурацию и, следовательно, не будет использовать какие-либо плагины. Это привело к unexpected token: import для меня.
• babel-7-jest работает на старом ядре Babel 7, что нарушает поддержку новых плагинов предложений.
• Похоже, что npm i -D [email protected] ПОЛНОСТЬЮ ИСПРАВЛЯЕТ ПРОБЛЕМУ . У меня даже нет env.test в моей конфигурации babel, и у меня нет конфигурации jest.

Кажется, что Jest ищет babel-core (и, таким образом, игнорирует @babel/core ), в противном случае он возвращается к Babel 6 и пропускает вашу конфигурацию. Но когда установлена ​​последняя версия babel-core (мостовая версия), она анализирует модули ES6 без какой-либо дополнительной конфигурации.

Спасибо kasvtv! Изменил мой .babelrc.js на .babelrc и установил npm i -D [email protected] . Теперь мои тесты выполняются с babel-jest

Вы можете смело использовать файл конфигурации .js. Просто Babel читает этот тип файлов только начиная с версии 7, и вам нужен [email protected], чтобы Jest использовал версию 7 Babel.

Если кому интересно, у меня работают тесты jest + фермент. Не стесняйтесь ковыряться в соответствующих файлах конфигурации . Кроме того, кто-нибудь заинтересован в помощи в разработке внешнего интерфейса для того же проекта?

Была аналогичная проблема из-за того, что библиотеки antd и rc-calendar и т. Д. Не могли импортировать модули, решение заключалось в настройке transformIgnorePatterns

transformIgnorePatterns: [ 'node_modules/?!(antd|rc-.+)/' ],

Может быть, moduleDirectories тоже помогли:

moduleDirectories: ['node_modules'],

Я обновился до последней версии, поддерживающей реакцию, и мне пришлось обновиться до babel 7, и теперь я получаю ту же ошибку.

Добавление этих node_modules в transformIgnorePatterns , похоже, больше ничего не дает.

В моем случае это потому, что я больше не транспилирую модули с помощью Babel, и в руководстве по началу работы есть примечание о добавлении этого обратно в test часть вашего babelrc.

@kasvtv @ willb335 Я использую трюк, чтобы Babel 6 распознал .babelrc.js:

package.json

  "babel": {
    "presets": [
      "./.babelrc.js"
    ]
  },

Я сталкиваюсь с той же проблемой с использованием библиотеки @ material / base, может ли кто-нибудь предоставить файл package.json & .babelrc для решения. Пробую выше отзывы, но перепутала ...

решением для меня было добавление предустановки "env" в файл .babelrc, так что получилось так
{
"presets": ["env", "es2016", "stage-0", "react"]
}

Использование этой информации по ссылке решило мою проблему
https://jestjs.io/docs/en/webpack.html

@negarineh твоя ссылка не работает

Использование решения transformIgnorePatterns предоставленного @haywirez, превращает мой

SyntaxError: Unexpected token import

ошибка в

TypeError: Cannot read property 'DocumentDir' of undefined

ошибка. Т.е. пакет (rn-fetch-blob) теперь не определен.

Редактировать:

на самом деле простое добавление transformIgnorePatterns: [], к моему jest.config.js приводит к смене SyntaxError на TypeError.

@schumannd Извините, я допустил ошибку, ссылка перенаправляет вас на страницу. Если вы установите свой "jest.config.js" с конфигурацией, указанной в ссылке, он должен работать.
Если ошибка связана с импортом файла .css, добавьте фиктивный файл, как в примере по ссылке, или просто установив "identity-obj-proxy" с этой конфигурацией:

npm install --save-dev identity-obj-proxy

jest.config.js (для модулей CSS):

{ "jest": { "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js", "\\.(css|less)$": "identity-obj-proxy" } } }

Кроме того, это мой файл .babelrc в корневом каталоге проекта (test.config.js также должен быть в корне):

Во-первых, чтобы использовать babel, установите «babel-jest» и «регенератор-время выполнения»:

npm --dev babel-jest babel-core regenerator-runtime

Затем добавьте эту конфигурацию в файл .babelrc:

{ "presets": ["env", "react"], "plugins": ["transform-class-properties"], "env": { "production": { "plugins": ["transform-es2015-modules-commonjs"] }, "test": { "presets": ["env", "react"], "plugins": ["transform-export-extensions"], "only": [ "./**/*.js", "node_modules/jest-runtime" ] } } }

Надеюсь это поможет.
https://jestjs.io/docs/en/webpack.html

В моем случае это работает после добавления следующего .babelrc

{
  "presets": ["env", "react"],
  "env": {
    "test": {
      "plugins": ["transform-class-properties"]
    }
  }
}

а затем запустите тест, используя NODE_ENV=test jest

Это поможет только НЕКОТОРЫМ людям.

Моя проблема возникла из-за того, что я не смог разобрать мой JS файл. Вместо этого я использовал require .

Ребята. Ни одно из этих решений не работает, потому что у меня нет файла babelrc ... только babel.config.js. Пожалуйста, как исправить с babel.config.js? Спасибо

Пробовал многое из приведенного выше обсуждения, написав конфигурацию babel а также некоторые дополнительные параметры из другого поиска (например, esm options) - ничего не сработало. Ключевое слово import продолжало выдавать ошибку из-за шутки. Печально, что тестировать модуль с импортом es6 так сложно.

Наконец то, что у меня сработало: ts-jest

Теперь я не использую машинописный текст в своем коде как таковой, но все же использовал ts-jest (поскольку машинописный текст внутренне поддерживает импорт и все остальное). Это просто для того, чтобы шутник правильно понял код javascript.

Выполнили следующие шаги:
npm i -D jest typescript ts-jest @types/jest
В файле jest.config.js :
transform: { "\\.js$": "ts-jest", transformIgnorePatterns: [], },
Jest может жаловаться на машинный скрипт, который не позволяет выполнять файлы js . Добавьте файл tsconfig.json со следующими параметрами:
{ "compilerOptions": { "allowJs": true, "module": "commonjs", "noImplicitAny": true, "removeComments": true, "preserveConstEnums": true, "sourceMap": true } }
Удалены все конфигурации и файлы, связанные с babel . Конфигурация npm выглядит следующим образом:
"scripts": { "test": "jest --runInBand --detectOpenHandles --no-cache --config ./jest.config.js" }
Надеюсь, это поможет любому, кто сталкивается с подобной проблемой с импортом.

У кого-нибудь есть репо с голыми костями, в котором есть рабочая настройка с использованием импорта JS?

У кого-нибудь есть репо с голыми костями, в котором есть рабочая настройка с использованием импорта JS?

https://github.com/kasvtv/react-starter

Как человек, который нашел эту страницу при поиске аналогичной проблемы, которая, вероятно, не имеет отношения к исходному обсуждению. Моя проблема в конечном итоге возникла из-за использования функционального динамического импорта, описанного https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports. В конечном итоге это было решено путем добавления плагина babel для этой функции, доступного по адресу https://github.com/airbnb/babel-plugin-dynamic-import-node, и соответствующего изменения .babelrc.

{
    ...
    "env": {
        "test": {
            "plugins": ["dynamic-import-node"]
        }
    ...
}

я просто удаляю опцию: { module: false }, и тогда она работает

"presets": [
    ["@babel/env", {module: false} ],  
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]

добавление transformIgnorePatterns: [] в конфигурацию jest и transform-es2015-modules-commonjs в babelrc решило проблему для меня.
шутка: ^ 23.1.0,
babel: 6.26.3

@ngmgit, но это означает, что вы переносите все свои node_modules, что не очень оптимально ...

В моем случае,
.babelrc не работает, но я решил проблему, переместив ту же настройку в .babelrc на babel.config.js .

надеюсь, что это помогло!

Ничего из того, что здесь происходит, мне не подходит. Я не могу поверить, что официальная тестовая библиотека Facebook для тестирования приложений React настолько сложна в настройке, я разработчик с опытом более 8 лет, и я провел 5 часов своего дня безуспешно, решая столько проблем и вопросов при переполнении стека.

Я просто не могу настроить свое приложение для реагирования на работу с jest + react-testing-library

это ТОЛЬКО потому, что шут каждый раз кричит мне о новой синтаксической ошибке, которую он не может обработать. Каждый плагин, который я использую, решает одну проблему и дает другую. Есть ли способ заставить Babel справиться со всем?

Я искренне покончил с этим, я действительно сдался, я больше не трачу на это больше времени, я, вероятно, откажусь от добавления этой библиотеки в проект.

Серьезно, очень странно видеть, что НЕТ конфигурации по умолчанию для НИКОГО, кто хочет протестировать приложение для реагирования с использованием библиотеки jest + react-testing-library.

после нескольких часов проб и ошибок со многими ответами SO и проблемами github, ответ @cpojer сработал для меня! 🙏

ОБНОВЛЕНО последними и лучшими с некоторым дополнительным контекстом, который мне помог:

babel.config.js

module.exports = {
  "env": {
    "production": {
-      "plugins": ["transform-es2015-modules-commonjs"]
# new kid on the block
+      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

jest.config.js

module.exports = {
  // if you're also using typescript
  preset: "ts-jest",
  testEnvironment: "node",
  verbose: true,
  // registers babel.config.js with jest
  transform: {
    "^.+\\.js$": "babel-jest",
  },
  // explicitly include any node libs using ESM modules
  transformIgnorePatterns: ["node_modules/?!(<ESM module here>|<another here>|<etc...>)"],
}

Зависимости:

• babel-jest
• @babel/plugin-transform-modules-commonjs
• ts-jest (для машинописного текста)

Эта проблема также может возникнуть, если jest не запущен в корневом каталоге проекта ...

Если вы используете предустановки react-native или jest-expo и в вашем проекте есть файлы .js , вы должны установить transform в соответствии с конфигурацией jest.
Я использовал выражение из https://jestjs.io/docs/en/configuration.html#transform -objectstring-pathtotransformer - pathtotransformer-object, и оно сработало.

transform: { '^.+\\.[jt]sx?$': 'babel-jest' }

поддержка pnpm

Я хочу оставить здесь заметку для пользователей pnpm ....

Следующий пример не работает для пользователей pnpm, потому что пути pnpm разные. Вышеупомянутые регулярные выражения работают только с плоскими каталогами node_modules .

/xxx/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/antd/es/input/String

См .: https://regexr.com/5cs2h

"transformIgnorePatterns": [
  "node_modules/(?!(react-native|my-project|react-native-button)/)"
]

https://jestjs.io/docs/en/tutorial-react-native#transformignorepatterns -customization

Исправить

Используйте отрицательный прогноз для последнего появления , добавив .* .

node_modules/(?!(.*antd/es)/)