在 WebStorm 中为 Vue + TypeScript 配置 jest 运行配置

Question

我想在 WebStorm 中执行我的所有测试，但我无法让它工作。我使用 vue-cli 3.0.0-rc3 使用 Babel、TypeScript 和 Vue 生成了一个项目。我的运行配置如下：

但是我收到以下错误：

● Test suite failed to run

/Users/calberca/Tmp/test-3/src/components/HelloWorld.vue:2
import "core-js/modules/es6.promise";
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string

  1 | import { shallowMount } from "@vue/test-utils";
> 2 | import HelloWorld from "../HelloWorld.vue";
    | ^
  3 | 
  4 | describe("HelloWorld.vue", () => {
  5 |   it("renders props.msg when passed", () => {

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (src/components/__tests__/HelloWorld.spec.ts:2:1)

当我从控制台运行yarn test:unit 时，测试通过了。但是当我运行jest --config=jest.config.js 时，测试失败了。

我最初的想法是它与 ts-jest 不使用 Babel 转换代码有关，而 vue-cli 以某种方式切换了一个选项来执行此操作，我想使用相同的命令，但我不知道是什么我应该这样做。

注意：我在一个更大的项目中这样做，并且 80%​​ 的测试都通过了，但是仍然有一些测试没有通过，并出现关于 ES6 及其他功能的类似错误。

编辑

Webstorm (2018.3) 的新更新以某种方式解决了这个问题，我什么都不用做 :)

Answer 1

使用以下配置为我工作：

我必须按如下方式更改jest.config.js 才能完成这项工作：

module.exports = {
moduleFileExtensions: [
    'ts',
    'tsx',
    'js',
    'jsx',
    'json',
    'vue'
],
transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.tsx?$': 'ts-jest'
},
moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
},
testMatch: ['<rootDir>/(tests/unit/**/*.spec.(ts|tsx|js)|**/__tests__/*.(ts|tsx|js))'],
snapshotSerializers: [
    'jest-serializer-vue'
]

}

Answer 2

将此添加到 jest.config.js 对我有用

 globals: {
        'ts-jest': {
            skipBabel: true
        }
    }