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

[andrew-breunig]

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, not a Vue component.

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.

[hartmut-co-uk]

Same issue here but with SSR, not with Jest - can't get it working via babel though as mentioned.

[zelid]

The same issue with SSR

[mrcrowl]

This should be addressed by more recent builds. Please reopen if this is still occurring.