无法使用 @vue/test-utils 在 Vue 中运行 Hello World 测试 [英] Can't run Hello World test in Vue with @vue/test-utils

问题描述

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

I'm trying to run my first test for my Vue app.

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

Here is the Hello World test I'm trying to run which I found at 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"
    }
  }
}

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

I was able to get a smaller sample test to run so I know I have some stuff installed correctly.

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

For example I can run this test:

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

那个测试通过了.

此外，此测试失败:

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

我搜索了错误TypeError: 'set' on proxy: trap returns falsish for property 'hasOwnProperty'"；但找不到看起来与我的问题有关的该死的东西.

I have searched for the error "TypeError: 'set' on proxy: trap returned falsish for property 'hasOwnProperty'" but can't find a darn thing that looks like it relates to my problem.

任何帮助将不胜感激.

推荐答案

更新你的 Vue 依赖到 3.0.6 +

Update your Vue dependency to 3.0.6 +

vue":^3.0.6"，

这应该可以解决问题:)

That should clear the problem :)

这篇关于无法使用 @vue/test-utils 在 Vue 中运行 Hello World 测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！