时间戳

首页 > 解决方案 > 在 vue 中使用 jest 时无法编译但测试用例通过

javascript - 在 vue 中使用 jest 时无法编译但测试用例通过

问题描述

我正在使用 jest 和 vue.js 并成功运行我的测试，但我的模块构建失败。我不明白为什么。这是我的代码。请帮助我。如果需要，我会提供更多。

包.json

{
  "name": "weather-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "jest"
  },
  "dependencies": {
    "@babel/core": "^7.7.2",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^7.0.0-bridge.0",
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "babel-jest": "^24.9.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "jest": "^24.9.0",
    "vue-jest": "^3.0.5",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
      "no-console": 0
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "jest": {
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    }
  }
}

我在屏幕上遇到的错误

Failed to compile.

./src/components/weather/weatherInfo.vue?vue&type=style&index=0&id=8f726072&lang=css&scoped=true& (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/weather/weatherInfo.vue?vue&type=style&index=0&id=8f726072&lang=css&scoped=true&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
JSONError: JSON Error in C:\Users\guest1\Projects\Vue Cli\wheather-app\package.json:
Unexpected token { in JSON at position 1057 while parsing near '... 2 versions"  ],  {    "jest": {    ...'
    at module.exports (C:\Users\guest1\Projects\Vue Cli\wheather-app\node_modules\parse-json\index.js:26:19)
    at Object.loadJson (C:\Users\guest1\Projects\Vue Cli\wheather-app\node_modules\cosmiconfig\dist\loaders.js:15:12)
    at Explorer.loadPackageProp (C:\Users\guest1\Projects\Vue Cli\wheather-app\node_modules\cosmiconfig\dist\createExplorer.js:176:35)
    at Explorer.loadFileContent (C:\Users\guest1\Projects\Vue Cli\wheather-app\node_modules\cosmiconfig\dist\createExplorer.js:230:12)
    at Promise.resolve.then (C:\Users\guest1\Projects\Vue Cli\wheather-app\node_modules\cosmiconfig\dist\createExplorer.js:252:21)

我的测试用例结果

λ npm test

> weather-app@0.1.0 test C:\Users\guest1\Projects\Vue Cli\wheather-app
> jest

 PASS  src/test/App.test.js (6.524s)
  App.test.js
    √ equals loading to true] (47ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.544s
Ran all test suites.

标签： javascriptvue.jstestingjestjs

解决方案

尝试更改 babel.config.js 中的预设

module.exports = {
  presets: [
    ['@babel/preset-env']
  ]
}

推荐阅读