开玩笑 ReferenceError：Vue 未定义

Question

我们正在将 Jest 引入现有项目。

但是，我写了一个示例测试代码。 出现以上错误。

   ReferenceError: Vue is not defined

      1 | import User from "../components/modal/ad/AdAdd";
    > 2 | import { mount } from "@vue/test-utils";
        | ^
      3 |
      4 | describe("user component", () => {
      5 |   let wrapper;

我该如何解决这个问题？

//User.test.js

import User from "../components/modal/ad/AdAdd";
import { mount } from "@vue/test-utils";

describe("user component", () => {
  let wrapper;
  beforeEach(() => {
    wrapper = mount(User);
  });
  test("render", () => {
    expect(wrapper.vm.oSid).toBe(0);
  });
});

export default {
  data() {
    return {
      Sid: 0,
      deleteList: [],
    };
  },

//package.json
"dependencies": {
    "eslint-plugin-jest": "^26.2.2",
    "vue": "^2.6.11",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.0",
  },
  "devDependencies": {
    "@babel/core": "^7.18.0",
    "@babel/preset-env": "^7.18.0",
    "@types/jest": "^27.5.1",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "^3.0.5",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^2.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^28.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "jest": "^28.1.0",
    "jest-environment-jsdom": "^28.1.0",
    "speed-measure-webpack-plugin": "^1.5.0",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-cli-plugin-vuetify": "~2.4.0",
    "vue-jest": "^3.0.7",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  }

我刚刚安装了它，但它说视图未定义。不知道怎么解决。

怎么了？？

我已经好几天没能解决上述错误了。

我想解决这个问题。 任何帮助将不胜感激。

Answer 1

我在 vue3 和 jest v.28 中遇到了同样的错误，解决方法是添加

    testEnvironmentOptions: {
       customExportConditions: ["node", "node-addons"],
    },

进入

jest.config.js

。这会覆盖从

exports

中的

package.json

加载的库版本，如jest 配置页面中所述。由于

['browser']

默认为

jest-environment-jsdom

，而我失败的测试都是针对 UI 的，因此可能没有为

jsdom

环境导入正确的库。

或者，如果您想要一个不影响其他导入的解决方案，请将其添加到

jest.config.js

中：

moduleNameMapper: {
  "^@vue/test-utils": "<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js"
}

这将告诉 Jest 导入

'node'

版本的

@vue/test-utils

，而不影响其他导入。

Answer 2

您正在使用 Vue 版本 2 和 @vue/test-utils 2.0.0，适用于 Vue 版本 3。

您可以在这里找到 Vue 2 的正确 @vue/test-utils 版本