使用 jest 和 vue 抛出 SyntaxError: Unexpected identifier error for import

如何解决使用 jest 和 vue 抛出 SyntaxError: Unexpected identifier error for import

我是 jest 的新手，我在我的项目中使用了 vue3 和 jest 26.6.3

//pachage.json

"jest": {
  "modulefileExtensions": [
    "js","json","vue"
  ],"moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1","^vue$": "vue/dist/vue.common.js"
  },"transform": {
    ".*\\.(vue)$": "<rootDir>/jest/jest-vue",".*": "babel-jest"
  }
},

我创建了一个 jest-vue 文件，内容是

// jest/jest-vue.js

const templateRegex = /<template>([\s\S]*)<\/template>/gm;
const scriptRegex = /<script>([\s\S]*)<\/script>/gm;
const babelJest = require("babel-jest");

module.exports = {
  process(src,filepath,config,transformOptions) {
    templateRegex.lastIndex = scriptRegex.lastIndex = 0;
    const template = templateRegex.exec(src)[1];
    return `${babelJest.process(
      scriptRegex.exec(src)[1],filepath + ".js",transformOptions
    )};
        exports.default['template']=\`${template}\`;
        `;
  },};

// app.spec.js

import App from "@/App.vue";

describe('App',() => {
  // Inspect the raw component options
  it("has data",() => {
    expect(typeof App.data).toBe("function");
  });
});

在我运行纱线测试后，我收到此错误

({"Object.":function(module,exports,require,__dirname,__filename,global,jest){[object 对象];

SyntaxError: Unexpected identifier

> 1 | import App from "@/App.vue";

如果您需要在此处查看我的代码，请使用 github repo

解决方法

我认为这个笑话缺少与 Vue 的联系。

尝试安装vue-jest，必须包含@next

yarn add vue-jest@next

使用vue-test进行.vue文件的代码转换

"jest": {
    "moduleFileExtensions": [
        "js","json","vue"
    ],"moduleNameMapper": {
        "^@/(.*)$": "<rootDir>/src/$1"
    },"transform": {
        "^.+\\.vue$": "vue-jest","^.+\\.js$": "babel-jest"
    }
},

你应该很高兴