typescript - 在 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）的新更新以某种方式解决了它，我什么都不做：）

标签： typescriptvue.jswebstorm

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'
]

}