Compilation of `vuex-typex` npm package's `dist/index.js` and compatibility with Jest

Question

This question was first posed as an open issue on GitHub .

I've run into syntax errors when running Jest tests with Vue.js, Vuex, TypeScript, and vuex-typex . I'm fairly new to working with Vue.js, TypeScript, and Jest.

It may be useful to mention that the tests in question are written directly against a Vuex store object ( .ts ), not a Vue component ( .vue ).

Here's the error output I get:

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)
  ...

I'm using the following versions of these tools:

"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"

And here are the configuration settings that process 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 thought this might be some kind of compilation issue in the distribution code published to npm, so I tried manually processing the dist/index.js file with Babel to the targets I'm using:

es2015
stage-2
"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]

This appeared to resolve the issue for me, but I'm only partially confident in my diagnosis. I don't see any other issues (open or closed) on this repository that would suggest others have run into this problem. I don't want to apply a misguided workaround or obscure an underlying implementation problem in my code.

I'm hoping that this is just a simple oversight or misunderstanding on my part. Can you offer any insight? Have you, or others you know, used this particular set of tools together with Jest tests? It appears that the tests for vuex-typex were written with Mocha and Chai, but I imagine that others must be using this with Jest, too.

Answer 1

I ran across the same thing and struggled to find a fix.

Fortunately, someone smarter than I figured it out and submitted a pull request:

https://github.com/mrcrowl/vuex-typex/pull/13

Utilize that until it is merged and you should be good to go.