I initially raised this question as an open issue on GitHub.
My experience with Vue.js, Vuex, TypeScript, and vuex-typex has led me to encounter syntax errors during Jest testing. I am relatively new to working with Vue.js, TypeScript, and Jest.
It is worth noting that the tests causing issues are directly written against a Vuex store object (.ts), not a Vue component (.vue).
The error output I receive is as follows:
Test suite failed to run
.../node_modules/vuex-typex/dist/index.js:19
import { Store } from "vuex";
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/store/main.ts:9:18)
...
The versions of the tools I am using are:
"vue": "^2.5.10"
"vuex": "^3.0.0"
"typescript": "^2.6.2"
"vuex-typex": "^3.0.1"
"jest": "^21.2.1"
"jest-vue-preprocessor": "^1.3.1"
"@types/jest": "^21.1.8"
"ts-jest": "^21.2.4"
"typescript-babel-jest": "^1.0.5"
Also, here are the configuration settings for processing test code:
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"]
}
}
}
package.json
...
"jest": {
"moduleFileExtensions": [
"js",
"ts",
"vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocks/file.ts",
"\\.(css|less)$": "<rootDir>/mocks/style.ts"
},
"transform": {
".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor",
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js",
".*": "<rootDir>/node_modules/babel-jest"
},
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!vuex-i18n).+\\.js$"
],
"testMatch": [
"**/?(*.)spec.ts"
],
"verbose": true
}
...
tsconfig.json
...
"jest": {
"globals": {
"ts-jest": {
"compilerOptions": {
"module": "commonjs"
},
"include": [
"./test/**/*"
]
}
}
}
...
I suspected that this might be a compilation issue in the distribution code published to npm, so I attempted manually processing the dist/index.js file with Babel to match my targets:
es2015
stage-2
"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]
This seemed to resolve the issue, but my confidence in this diagnosis is only partial. I have not come across any other open or closed issues on this repository indicating that others have faced this problem. I don't want to apply a misguided workaround or mask an underlying implementation issue in my code.
I am hopeful that this is simply a minor oversight or misunderstanding on my part. Do you have any insights to share? Have you or people you know used these specific tools alongside Jest tests? While it appears that the tests for vuex-typex were developed with Mocha and Chai, I believe others must also be using them with Jest.