无法使用 @vue/test-utils 在 Vue 中运行 Hello World 测试

Question

我正在尝试为我的 Vue 应用程序运行我的第一个测试。

这是我尝试运行的 Hello World 测试，我在 https://next.vue-test-utils.vuejs.org/guide/ 找到了该测试

import { mount } from '@vue/test-utils'

// The component to test
const MessageComponent = {
 template: '<p>{{ msg }}</p>',
 props: ['msg']
}

test('displays message', () => {
 const wrapper = mount(MessageComponent, {
   props: {
     msg: 'Hello world'
   }
 })

 // Assert the rendered text of the component
 expect(wrapper.text()).toContain('Hello world')
})

我希望测试通过。

相反，我得到了这个：

 FAIL  tests/unit/components/example.spec.js
  × displays message (4ms)

  ● displays message

    TypeError: 'set' on proxy: trap returned falsish for property 'hasOwnProperty'

       8 | 
       9 | test('displays message', () => {
    > 10 |   const wrapper = mount(MessageComponent, {
         |                   ^
      11 |     props: {
      12 |       msg: 'Hello world'
      13 |     }

      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:2347:24)
      at Object.<anonymous> (tests/unit/components/example.spec.js:10:19)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.826s
Ran all test suites related to changed files.

Watch Usage: Press w to show more.

这是我的依赖项：

{
  "name": "vue-compassion",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test:unit --watch",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.20.0-0",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-router": "^4.0.1",
    "vuex": "^4.0.0-rc.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "^4.5.11",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "env-cmd": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "flush-promises": "^1.0.2",
    "jest": "^26.6.3",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.0",
    "supertest": "^6.1.3",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest",
    "transform": {
      "^.+\\.vue$": "vue-jest"
    }
  }
}

我能够运行一个较小的样本测试，所以我知道我已经正确安装了一些东西。

例如我可以运行这个测试：

test('displays message', () => {
  expect(1).toBe(1)
})

测试通过了。

此外，此测试失败：

test('displays message', () => {
  expect(1).toBe(2)
})

我已搜索错误“TypeError: 'set' on proxy: trap returned falsish for property 'hasOwnProperty'”但找不到看起来与我的问题有关的该死的东西。

任何帮助将不胜感激。

Answer 1

将你的 Vue 依赖更新到 3.0.6 +

"vue": "^3.0.6",

这应该可以解决问题:)