Vue3 的 Quasar 单元测试

Posted 2023-02-22

【中文标题】Vue3 的 Quasar 单元测试

【英文标题】：Quasar unit testing for vue3

【发布时间】：2021-10-22 01:34:02

【问题描述】：

我正在使用 quasar 开发一个 vue 应用程序。我正在使用 vue 3.0.7。我已经安装了 jest 并创建了 jest.config 文件。

jest 配置文件包含以下内容：

clearMocks: true,

  moduleFileExtensions: [
    "js",
    "jsx",
    "ts",
    "vue"
  ],
 
  testMatch: [
    "**/__tests__/**/*.[jt]s?(x)",
    "**/?(*.)+(spec|test).[tj]s?(x)"
  ],
  
  transform: 
    "^.+\\.js$": "babel-jest",
    ".*\\.(vue)$": "vue-jest"
  ,

  transformIgnorePatterns: [
    "\\\\node_modules\\\\",
    "\\.pnp\\.[^\\\\]+$"
  ],

我正在为一个演示 vue 组件编写以下测试：

import  shallowMount from "@vue/test-utils"
import  ComponentVueTest from "./ComponentVueTest"

describe('ComponentVueTest', ()=>
    test("Text shoudl be in the html" , () => 
        let wrapper = shallowMount(ComponentVueTest);
        expect(wrapper.html).toContain('JustTesting');
    )
)

正在测试的组件：

<template>
  JustTesting
</template>

<script>
import  defineComponent  from '@vue/composition-api'

export default defineComponent(
    setup() 
        
    ,
)
</script>

<style>

</style>

还有 package.json 依赖：

 "dependencies": 
    "@quasar/extras": "^1.0.0",
    "@typescript-eslint/eslint-plugin": "^4.29.1",
    "@typescript-eslint/parser": "^4.29.1",
    "@vue/composition-api": "^1.0.6",
    "cordova": "^10.0.0",
    "core-js": "^3.6.5",
    "quasar": "^2.0.0",
    "vue": "^2.6.14",
    "vue-loader": "^16.5.0",
    "vue-template-compiler": "^2.6.14"
  ,
  "devDependencies": 
    "@babel/core": "^7.15.0",
    "@babel/eslint-parser": "^7.13.14",
    "@babel/preset-env": "^7.15.0",
    "@quasar/app": "^3.0.0",
    "@quasar/quasar-app-extension-testing": "^1.0.3",
    "@quasar/quasar-app-extension-testing-unit-jest": "^2.2.2",
    "@vue/test-utils": "^2.0.0-rc.12",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^27.0.6",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-vue": "^7.0.0",
    "eslint-webpack-plugin": "^2.4.0",
    "jest": "^27.0.6",
    "vue-jest": "^3.0.7"
  ,

当我运行 npm run test ("test": "npx jest") 我得到以下错误：

FAIL  src/__tests__/Demo.spec.js
  ● Test suite failed to run

    TypeError: Vue.defineComponent is not a function

    > 1 | import  shallowMount from "@vue/test-utils"
        | ^
      2 | import  ComponentVueTest from "./ComponentVueTest"
      3 |
      4 | describe('ComponentVueTest', ()=>

      at Object.<anonymous> (node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7856:26)
      at Object.<anonymous> (src/__tests__/Demo.spec.js:1:1)

我已经尝试了几个小时来修复它，但似乎无法理解问题所在

【参考方案1】：

尝试更改：import defineComponent from '@vue/composition-api' 到 import defineComponent from 'vue'

您还需要将wrapper.html 更改为wrapper.text() 并添加toMatch 而不是toContain，这表示以下应该可以工作：

import  shallowMount from "@vue/test-utils"
import  ComponentVueTest from "./ComponentVueTest"

describe('ComponentVueTest', ()=>
    test("Text should be in the html" , () => 
        let wrapper = shallowMount(ComponentVueTest);
        expect(wrapper.text()).toMatch('JustTesting');
    )
)

【参考方案2】：

在 quasar v2 中对 vue3 进行单元测试的解决方案是使用 @quasar/quasar-app-extension-testing-unit-jest。只需安装它

quasar ext add @quasar/quasar-app-extension-testing-unit-jest 

它应该为你设置好一切。请注意，它仍处于 alpha 阶段，并且某些组件还没有完全工作（对我来说 QPage 没有工作）。 希望这对某人有帮助:)