Vue组件单元测试 - Jest设置 - "Unexpected Identifier" 错误

Question

我刚接触Jest，并尝试运行一个简单的单元测试，只是为了确保一切设置正确，但在编译期间遇到了许多故障排除错误。

运行测试套件时，Jest成功找到我要测试的文件，并在第1行生成以下“意外标识符”错误消息。 任何想法为什么会这样？是否有遗漏的东西？我一直在尝试解决这个问题。

/Users/foo/Sites/test/Test.spec.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Test from './Test.vue';
                                                                                                    ^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

注意，完全删除导入语句会成功运行测试。然而我设置Jest的原因是为了测试Vue组件。

Test.vue

<template>
        <div class="test">
        </div>
</template>

<script>
    export default {
        name: 'test',
        components: { },
        data() {
            return {

            }
        },
        methods: {
            helloWorld() {
                return 'hello world';
            }
        }
    }
</script>

测试.spec.js

import Test from './Test.vue'

describe('Test',() => {
   it('test', () => {
     expect(true).toBe(true);
   });
});

{"name": "package-name", "version": "1.0.0", "description": "description of your package", "main": "index.js", "scripts": {"test": "echo \"Error: no test specified\" && exit 1"}, "author": "Your Name", "license": "ISC"}

"devDependencies": {
    "@vue/test-utils": "^1.0.0-beta.25",
    "axios": "^0.18.0",
    "babel-core": "^6.26.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^7.1.2",
    "cross-env": "^5.1.1",
    "file-loader": "^2.0.0",
    "jest": "^23.6.0",
    "jquery": "^3.2",
    "laravel-mix": "^2.0",
    "lodash": "^4.17.4",
    "popper.js": "^1.14.3",
    "source-map-support": "^0.5.9",
    "vue": "^2.5.7",
    "vue-jest": "^3.0.0",
    "vue-test-utils": "^1.0.0-beta.11",
    "webpack": "^3.8.1"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "babel-jest"
    }
  }

- AnchovyLegend

Answer 1

您正在测试中使用ES6功能，即import语句，因此需要使用预设将它们编译为ES5。

创建一个babel.config.js文件，并添加@babel/preset-env，如下所示：

//babel.config.js
module.exports = {
  presets: ["@babel/preset-env"]
};

接下来，在您的 package.json 文件中的 jest 设置下，让 jest 知道您的测试代码所在的 根目录，以及 jest 将递归搜索的模块目录，像这样：

//package.json
"roots": [
  "test"
],
"moduleDirectories": [
  "test",
  "node_modules"
],

- Stamatios Stamoulas