Vue.js 如何配置通过Vue cli 3添加到应用程序的Jest？

我试图将Jest测试引入到Vue应用程序构建中。我跑了

vue add unit-jest

与建议类似，创建了以下简单测试文件（Paginator.spec.js与Paginator.vue位于同一文件夹中，即

/src/components

）：

起初，我对Jest本身找不到文件有一些问题。稍后，我在jest.config.js中进行了更改

testMatch: [
  '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
],

到

在一些奇怪的小故障之后，我找到了文件（did

git-stash

，确保应用程序正常工作，然后

git-stash-pop

，它开始查找文件）

但我仍然有一个笑话的问题，那就是不承认

import

。无论运行

jest

或

npm测试

（即

vue cli服务测试：unit

），我都会收到以下错误。像这样的简单测试正常工作：

describe('tests of components', () => {
    it('work', () => {
        const a = 2;
        expect(a).toBe(2);
    })
});

但问题开头显示的测试带来了

测试套件无法运行
[……]

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { mount } from '@vue/test-utils'
                                                                                                ^
SyntaxError: Unexpected token {
  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

我明白了

（resolveWebpackConfig似乎是）

据我所知，在vue.config.js中调整内部网页包配置，但我不知道这是开始修改的初始配置，也不知道实际应该调整什么

我尝试了

npm I babel jest

（不确定它是否已经由vue cli安装），添加了

.babelrc

，带有

{“预设”：[“最新”]}

类似于一个人所做的，尝试向vue.config.js添加该线程中另一个人建议的部分：

configureWebpack: {
    module: {
        rules: [
            {
                loader: "babel-loader",
                options: {
                    presets: ["latest"]
                }
            }
        ]
    }
},

还有一些建议，从现在开始，我没有主意了

下面您可以看到所有配置文件

还有一个好处：如果我将Paginator.spec.js重命名为Paginator.spec.ts，则会让Jest显示以下内容：

● Test suite failed to run

  Passing cached plugin instances is not supported in babel.loadPartialConfig()

    at forEach.item (node_modules/@babel/core/lib/config/partial.js:120:13)
        at Array.forEach (<anonymous>)
    at loadPartialConfig (node_modules/@babel/core/lib/config/partial.js:118:27)
    at TsJestTransformer.process (node_modules/ts-jest/dist/ts-jest-transformer.js:110:32)

vue.config.js：

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue',
    'ts',
    'tsx'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.tsx?$': 'ts-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/*.spec.(js|ts)|**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ],
  globals: {
    'ts-jest': {
      babelConfig: true
    }
  }
};

module.exports = {
  presets: [
    '@vue/app'
  ]
}

module.exports = {
    // the default value is '/', which may be ok for production but is not suitable for local build/deploy
    publicPath: ''
};

package.json的一部分：

  "scripts": {
    "lint": "vue-cli-service lint",
    "serve": "vue-cli-service serve",
    "test:unit": "vue-cli-service test:unit",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vuex": "^3.1.1",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.2.2",
    "axios": "^0.19.0",
    // more packages
  },
  "devDependencies": {
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-typescript": "^3.11.0",
    "@vue/cli-plugin-unit-jest": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "ts-jest": "^23.0.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

tsconfig.json：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

---

我认为这是一个tsconfig问题—您需要commonjs而不是esnext—您可以在ts jest for jest only tsconfig.jsonDon中使用tsconfig选项—在其声明中：

默认的Babel配置禁用ES模块传输，因为webpack已经知道如何处理ES模块。但是，我们确实需要为我们的测试启用它，因为Jest测试直接在节点中运行。

所以类似于：

“预设”：[[“env”，{“targets”：{“Node”：“current”}]

-对于js文件，我想ts文件是commonjs@YakovL您是否直接从命令行运行

jest

，我试过直接调用

jest

和

npm运行测试

（顺便说一句，我已经删除了“：unit”位），两个都失败了，但我不能说两个直接运行

jest

的输出是否有任何差异可能会导致您提到的错误。

@vue/cli插件单元jest

插件为jest设置了Babel，但是直接运行

jest

不会看到设置的效果（除非您模仿插件之前所做的操作）。

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue',
    'ts',
    'tsx'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.tsx?$': 'ts-jest'
  },
  transformIgnorePatterns: [
    '/node_modules/'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: [
    'jest-serializer-vue'
  ],
  testMatch: [
    '**/*.spec.(js|ts)|**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  testURL: 'http://localhost/',
  watchPlugins: [
    'jest-watch-typeahead/filename',
    'jest-watch-typeahead/testname'
  ],
  globals: {
    'ts-jest': {
      babelConfig: true
    }
  }
};

module.exports = {
  presets: [
    '@vue/app'
  ]
}

module.exports = {
    // the default value is '/', which may be ok for production but is not suitable for local build/deploy
    publicPath: ''
};

  "scripts": {
    "lint": "vue-cli-service lint",
    "serve": "vue-cli-service serve",
    "test:unit": "vue-cli-service test:unit",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vuex": "^3.1.1",
    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.2.2",
    "axios": "^0.19.0",
    // more packages
  },
  "devDependencies": {
    "@types/jest": "^23.1.4",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-plugin-typescript": "^3.11.0",
    "@vue/cli-plugin-unit-jest": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-typescript": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "ts-jest": "^23.0.0",
    "typescript": "^3.4.3",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}