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

Posted 2023-03-10

【中文标题】使用 jest 和 vue 抛出 SyntaxError: Unexpected identifier error for import

【英文标题】：Using jest and vue throw SyntaxError: Unexpected identifier error for import

【发布时间】：2021-08-08 09:12:18

【问题描述】：

我是 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",
      config,
      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

【参考方案1】：

我认为这个笑话是缺少与 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"
    
,

你应该很高兴