javascript - Import Unexpected identifier + SyntaxError: Unexpected string
问题描述
运行笑话测试时遇到问题。我收到了一个导入的意外标识符
我已经尝试过清理 npm 缓存并安装npm babel jest、polyfill、preset-es2015。我也在这里和那里尝试了一些不同的配置。
这是我的babel.config.js
module.exports = {
presets: [
'@vue/app'
],
env: {
test: {
plugins: [
"transform-strict-mode",
"transform-es2015-modules-commonjs",
"transform-es2015-spread",
"transform-es2015-destructuring",
"transform-es2015-parameters"
]
}
}
}
和我jest config
在 package.json
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "vue-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
}
这是错误。
Test suite failed to run
PCROUTE\Test.test.js:3
import _interopRequireDefault from "PCROUTE\\node_modules\\@babel\\runtime-corejs2/helpers/esm/interopRequireDefault";
^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
我希望通过测试,但我收到了错误消息。我认为问题出在 babel.config.js 中的 env 部分
编辑:我也在使用 windows 7,我这可能会导致那些前后混合斜线。
Edit2:我刚刚在 Linux 中测试过它,但它不起作用。我全都是正斜杠
PCROUTE/src/tests/Test.test.js:3
import _interopRequireDefault from "PCROUTE/node_modules/@babel/runtime-corejs2/helpers/esm/interopRequireDefault";
^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript
编辑3:我看到很多人用[这些行](https://github.com/vuejs/vue-cli/issues/1879#issuecomment-409872897)修复了它。
transformIgnorePatterns: [
"node_modules/(?!(babel-jest|jest-vue-preprocessor)/)"
]
在jest config file
. 我添加了它们并运行了它./node_modules/jest/bin/jest.js --clearCache
,但它不起作用。
编辑 4:我刚刚在我的 jest 文件中添加了一些东西。并在我的 babel 文件中删除了一对,现在我得到了。Unexpected String
新的笑话文件
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname'
]
}
我从我的 babel 文件中删除了除该presets: @vue/app
部分之外的所有内容。
这是我得到的新错误。
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.find";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
解决方案
经过几天的努力。我最终回答了我的问题。在这里我留下我所有的配置文件。
jest.config.js
process.env.VUE_CLI_BABEL_TARGET_NODE = true;
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
moduleFileExtensions: [
'js',
'jsx',
'json',
'vue'
],
transform: {
'^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\\.jsx?$': 'babel-jest'
},
transformIgnorePatterns: [
'/node_modules/'
],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1'
},
snapshotSerializers: [
'jest-serializer-vue'
],
testMatch: [
'**/tests/**/*.test.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],
testURL: 'http://localhost/',
watchPlugins: [
'jest-watch-typeahead/filename',
'jest-watch-typeahead/testname'
]
}
babel.config.js
module.exports = {
presets: [
'@vue/app'
]
}
笔记
- 我需要添加babel 核心桥才能将 @babel/core 与 vue-jest 一起使用
- 建议更改文件后清除 jest 的缓存
推荐阅读
- java - Spring项目中的org.springframework.beans.NotWritablePropertyException
- html - 如何使用 CSS 实现这种布局?
- php - 从我的本地主机 PHP 应用程序连接到 VM 上的 Redis
- r - 使用 tmap tm_bubble 添加固定大小的中断
- maven - 如何收集多模块的所有依赖项
- android - FCM Android:不允许后台启动
- javascript - 在回调中使用 javascript nodejs 类方法并保留两个上下文
- c++ - 为什么私有继承对象允许成员函数将派生*转换为基*但外部不允许?
- aws-glue - aws 胶水增量加载关系数据库
- java - 如何让我的 GUI 显示符合 JTextFields 的 JLabels?