Question

我是 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

Answer 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"
    }
},

你应该很高兴

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

1 个答案: