将 Vue 2 项目单元测试到 Vue 3 (vue-cli) 时出错

Question

我有一个 vue cli 生成的 vue 2 项目。我尝试按照迁移指南升级到 Vue 3，整体代码运行良好。但是在尝试运行我的单元测试时，出现以下错误：

TypeError: Right-hand side of 'instanceof' is not an object

      12 |   it('renders props.msg when passed', () => {
      13 |     const msg = 'new message'
    > 14 |     const wrapper = mount(HelloWorld, {
         |                     ^
      15 |       props: { msg }
      16 |     })
      17 |     expect(wrapper.text()).toMatch(msg)

我在运行来自项目脚手架的基础 HelloWorld 组件时收到此错误。

我的依赖如下：

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "axios": "^0.21.1",
    "bulma": "^0.9.2",
    "core-js": "^3.6.5",
    "vue": "^3.1.0",
    "vue-router": "^4.0.10"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "cross-env": "^7.0.3",
    "electron": "11.0.0",
    "electron-devtools-installer": "^3.2.0",
    "flush-promises": "^1.0.2",
    "jquery": "^3.6.0",
    "spectron": "13.0.0",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "@vue/test-utils": "^2.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^7.0.0",
    "lint-staged": "^9.5.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  },

vue组件代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: {
      type: String
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

我的笑话配置

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testEnvironment: 'node',
  transform: {
    '^.+\\.vue$': 'vue-jest'
  }
}

Answer 1

我遇到了类似的问题，结果证明我在 jest.config.js 文件中设置了 testEnvironment: 'node'。删除它时，它工作得很好。 如果您需要更改某个测试文件的 testEnviroment，您可以在测试文件的顶部添加一个注释掉的块：

/**
 * @jest-environment jsdom
 */

来源：docs