I'm having a problem when running jest test. I'm getting an import unexpected identifier
I have already tried by cleaning npm cache and installing npm babel jest, polyfill, preset-es2015. I've also read this trying some different configs here and there.
This is my 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"
]
}
}
}
and my jest config
in package.json
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\\.js$": "babel-jest",
".*\\.(vue)$": "vue-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1"
}
}
Here is the error.
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
I'm expecting to pass the test but I'm getting that error message. I think the problem comes with the env part in the babel.config.js
Edit: I'm also using windows 7, and I this can be causing those back and forward mixed slashes.
Edit2: I just tested it in Linux and it doesn't work. I have all in forward slashes
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
Edit 3: I saw a lot of people fixed it with [these lines](https://github.com/vuejs/vue-cli/issues/1879#issuecomment-409872897).
transformIgnorePatterns: [
"node_modules/(?!(babel-jest|jest-vue-preprocessor)/)"
]
in the jest config file
. I added them and ran this ./node_modules/jest/bin/jest.js --clearCache
but it doesn't work.
Edit 4: I just added a couple of things to my jest file. And deleted a couple in my babel file, and now I'm getting. Unexpected String
NEW JEST FILE
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'
]
}
And I deleted everything from my babel file except the presets: @vue/app
part.
Here is the new error I'm getting.
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import "core-js/modules/es6.array.find";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Unexpected string
To solve the "Uncaught SyntaxError: Unexpected identifier" error, make sure you don't have any misspelled keywords, e.g. Let or Function instead of let and function , and correct any typos related to a missing or an extra comma, colon, parenthesis, quote or bracket.
The "SyntaxError: Unexpected token import" occurs when we use the ES6 import syntax in a version of Node that doesn't support it. To solve the error, use the require syntax, e.g. const myPackage = require('my-package') or set the type attribute to module in your package. json file.
As you write your JavaScript application, the unexpected token error always occurs because JavaScript expected a specific syntax that's not fulfilled by your current code. You can generally fix the error by removing or adding a specific JavaScript language symbol to your code.
1) require() In NodeJS, require() is a built-in function to include external modules that exist in separate files. require() statement basically reads a JavaScript file, executes it, and then proceeds to return the export object.
After days of struggling with this. I ended up by answering my question. Here I leave all my config files.
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'
]
}
module.exports = {
presets: [
'@vue/app'
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With