vuex-typex` npm软件包的`dist / index.js`的编译以及与Jest的兼容性

Question

这个问题最初是在GitHub上公开提出的。

使用Vue.js，Vuex，TypeScript和vuex-typex运行Jest测试时，我遇到语法错误。 我刚接触Vue.js，TypeScript和Jest。

值得一提的是，有问题的测试是直接针对Vuex存储对象（ .ts ）而不是针对Vue组件（ .vue ） .vue 。

这是我得到的错误输出：

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

我正在使用这些工具的以下版本：

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

这是处理测试代码的配置设置：

.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/**/*"
        ]
      }
    }
  }
...

我认为这可能是发布到npm的分发代码中的某种编译问题，所以我尝试使用Babel手动处理dist/index.js文件到我正在使用的目标：

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

这似乎为我解决了这个问题，但是我对诊断只感到部分自信。 我在此存储库中没有看到任何其他问题（打开或关闭），这表明其他人已经遇到了这个问题。 我不想在我的代码中应用错误的解决方法或掩盖潜在的实现问题。

我希望这只是我的简单疏忽或误解。 您能提供任何见解吗？ 您或您认识的其他人是否已将这套特定的工具与Jest测试一起使用？ 看来vuex-typex的测试是用Mocha和Chai编写的，但我想其他人也必须将其与Jest一起使用。

Answer 1

我遇到了同样的事情，努力寻找解决方法。

幸运的是，有一个比我更聪明的人提出了请求请求：

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

利用它直到合并为止，您应该一切顺利。