[英]Babel + Jest Configuration
問題:
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
path\setupTests.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { configure } from 'enzyme';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (../node_modules/jest-runtime/build/script_transformer.js:403:17)
這是我的設置:
package.json
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-jest": "^23.6.0",
"babel-loader": "7.1.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "6",
"babel-runtime": "6",
"css-loader": "0.28.11",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.5",
"jest": "^23.2.0",
"jest-enzyme": "^6.0.2",
}
.babelrc
{
"presets": [ [
"env", {
"targets": {
"node": "current"
}
}
], "react"],
"plugins": [
[
"react-css-modules",
{
"filetypes": {
".scss": {
"syntax": "postcss-scss"
}
},
"webpackHotModuleReloading": true
}
],
["transform-class-properties", { "spec": true }],
["transform-object-rest-spread"],
["emotion"]
],
"env": {
"test": {
"presets": [
"jest",
"react",
[
"env",
{
"debug": false,
"modules": "commonjs",
"targets": {
"node": "current"
},
"useBuiltIns": true
}
]
],
"plugins": [
"transform-es2015-modules-commonjs",
[
"react-css-modules",
{
"generateScopedName": "[local]",
"filetypes": {
".scss": {
"syntax": "postcss-scss",
"plugins": [
"postcss-nested"
]
}
}
}
]
]
}
}
}
jest.config.js
module.exports = {
rootDir: 'client',
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
'\\.(scss)$': 'identity-obj-proxy',
'<rootDir>/config.js': '<rootDir>/__mocks__/config.js'
},
setupFiles: ['<rootDir>/setupTests.js'],
setupTestFrameworkScriptFile: '../node_modules/jest-enzyme/lib/index.js',
transform: {}
};
我已通讀:
https://jestjs.io/docs/en/getting-started.html#using-babel https://github.com/facebook/jest/issues/5164#issuecomment-366139663 配置 Babel 和 Jest Jest es6 模塊:意外模塊導入如何在 Jest 中使用 babel-preset-env https://github.com/facebook/jest/issues/1654
我正在使用Yarn 1.9.1
。 我已經刪除並重新安裝了我的依賴項。
而我仍然無法迷失。
您仍在使用 Babel 6 - 我建議您閱讀 Babel 7 升級文檔https://babeljs.io/docs/en/v7-migration
發生了很多變化,尤其是在預設方面,現在已經簡化了。
這里有一個工具可以幫助您入門: https : //github.com/babel/babel-upgrade - 這將查看您的 package.json 並自動升級您的大部分 babel 包含和預設。
值得閱讀升級指南並遵循它。 在此過程中,您可能會找到問題的原因,並確信您的設置是正確的。
我正在分享我的工作 babelrc 和 package.json 文件。 您可以在它的頂部進行調試,以找出您的設置出現問題的地方。
babel.rc
{
"presets": [
[
"@babel/preset-env",
{
"debug": false,
"targets": {
"browsers": ["last 3 versions"]
}
}
]
]
}
包.JSON
{
"name": "babelWithJest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"npm": "^6.4.1"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.54",
"@babel/preset-env": "^7.0.0-beta.54",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.4.0",
"bili": "^3.1.2",
"jest": "^23.4.1",
"regenerator-runtime": "^0.12.0"
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.