在WebStorm中为Vue + TypeScript配置临时运行配置

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