正文

Vue3 的 Quasar 单元测试

 2023-02-22  270

关键词：

【中文标题】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 没有工作）。希望这对某人有帮助:)

【讨论】：

使用 Quasar-Framework 0.15 的 Jest 单元测试配置

】使用Quasar-Framework0.15的Jest单元测试配置【英文标题】：JestunittestingconfigwithQuasar-Framework0.15【发布时间】：2018-09-1123:41:22【问题描述】：我在Quasar0.14版下进行了Jest测试。目前，一些简单的测试和所有快照测试都通过了，但对于... 查看详情

如何使用 Vue3 和 Typescript 在 Quasar Framework 中定义 ref 方法的类型

】如何使用Vue3和Typescript在QuasarFramework中定义ref方法的类型【英文标题】：HowdefinetypeofrefmethodinQuasarFrameworkwithVue3andTypescript【发布时间】：2021-10-1108:17:21【问题描述】：QuasarFrameworkv2测试版Vue3组合API打字稿组件模板<q-btn@click.stop... 查看详情

在 vue3 / quasar2 中访问 $route

】在vue3/quasar2中访问$route【英文标题】：accessto$routeinvue3/quasar2【发布时间】：2021-12-1410:56:22【问题描述】：我正在使用带有API组合的Quasar，但我遇到了问题。我只想从当前路由中获取参数，所以在onMounted中，我尝试使用this.$route... 查看详情

如何测试 Quasar（作为 Vue CLI 插件）？

】如何测试Quasar（作为VueCLI插件）？【英文标题】：HowtotestQuasar(asVueCLIplugin)?【发布时间】：2020-03-1708:01:39【问题描述】：我有Vue项目，我在这里使用QuasarFramework。最后一个我用作VueCLIPlugin，它完美运行（coderepo和liveurl）。现在... 查看详情

Vue 3单元测试无法到达元素

】Vue3单元测试无法到达元素【英文标题】：Vue3UnitTestcannotgettoelement【发布时间】：2021-12-0805:36:46【问题描述】：我有一个使用PrimeVue的Vue3项目。在我的模板中，我有一个PrimeVue对话框组件：<template><div><Buttondata-testid="s... 查看详情

Quasar 2.2.2、Vue 3 和 Firebase：如何从路由器访问 GlobalProperties

】Quasar2.2.2、Vue3和Firebase：如何从路由器访问GlobalProperties【英文标题】：Quasar2.2.2,Vue3andFirebase:howtoaccessGlobalPropertiesfromrouter【发布时间】：2021-12-1703:35:10【问题描述】：我第一次在我的Quasar应用程序中实施Firebase（使用Vue3）。我... 查看详情

尝试使用 gcs json api、axios、vue3、quasar 和 node14 执行单个块可恢复上传到谷歌云存储时出现 cors 错误

】尝试使用gcsjsonapi、axios、vue3、quasar和node14执行单个块可恢复上传到谷歌云存储时出现cors错误【英文标题】：Gettingcorserrorswhentryingtoperformasinglechunkresumableuploadtogooglecloudstorageusinggcsjsonapi,axios,vue3,quasarandnode14【发布时间】：2022-01-... 查看详情

如何使用 Quasar 框架访问 Vuex 存储模块操作中的 Vue 路由器？

】如何使用Quasar框架访问Vuex存储模块操作中的Vue路由器？【英文标题】：HowtoaccessvuerouterinVuexstoremoduleactionswithQuasarframework?【发布时间】：2021-08-1919:05:51【问题描述】：我正在使用QuasarFrameworkv2测试版Vue3组合APIVuex4打字稿我的问... 查看详情

从 CLI 生成的新 vue 3 项目的单元测试中出错

】从CLI生成的新vue3项目的单元测试中出错【英文标题】：Gettingerrorinunittestfromnewvue3projectgeneratedbyCLI【发布时间】：2021-01-0620:16:58【问题描述】：我使用具有以下规格的vuecli创建了一个新项目：vue3打字稿没有类语法vue-路由器巴别... 查看详情

用 Quasar 和 Typescript 开玩笑

】用Quasar和Typescript开玩笑【英文标题】：JestMockingwithQuasarandTypescript【发布时间】：2021-01-1003:10:48【问题描述】：我想在我的测试中模拟AmplifyAuth服务。没有错误，但由于我的模拟，测试不起作用。这是我要测试的代码：signIn():vo... 查看详情

Quasar（vue）中嵌套在路由器中的子级中的父级触发方法

】Quasar（vue）中嵌套在路由器中的子级中的父级触发方法【英文标题】：triggermethodinparentfromchildnestedinrouterinQuasar(vue)【发布时间】：2021-08-2806:24:22【问题描述】：我使用Quasar框架(vue3)在我的路由器中获得了这个带有嵌套路由的结... 查看详情

Vue 路由器的注入在 Jest 单元测试期间失败

】Vue路由器的注入在Jest单元测试期间失败【英文标题】：Vuerouter\'sinjectionfailsduringaJestunittest【发布时间】：2021-10-1604:40:42【问题描述】：在带有CompositionAPI（和Vue3）的.vue文件中，设置路由器：constrouter=useRouter()在开玩笑测... 查看详情

全局属性的“功能”类型上不存在 Vue3 属性“x”

...rty【发布时间】：2021-12-3117:50:09【问题描述】：我有一个Quasar应用，但似乎遇到了一个奇怪的问题。我正在尝试定义一个全局变量，它是一个仅包含有关应用程序的元信息的对象。应用程序完全编译，正确的信息显示在HTML中，... 查看详情

Vue3 Vite 和 jest 测试没有模板编译器

】Vue3Vite和jest测试没有模板编译器【英文标题】：Vue3Viteandtestswithjesthasnotemplatecompiler【发布时间】：2021-02-1123:31:10【问题描述】：我使用Vue3Vite制作的代码库，但我找不到运行导入组件的简单Jest测试的方法。这在使用Vue-cli创建... 查看详情

vite+vue3+ts项目初始化操作(代码片段)

...状态管理添加Pinia✔AddVitestforUnitTesting?…`No`/Yes//为单元测试添加Vitest✔AddCypressforbothUnitandEnd-to-Endtesting?…`No`/Yes//为单元和端到端测试添加Cypress 查看详情

ReferenceError: ShadowRoot 未定义 Jest 和 Vue3

...：2021-05-1909:55:09【问题描述】：我正在使用Jest设置Vue3和单元测试。我已经不得不努力让它发挥作用，并且我已经尝试了很多不同的配置。这是我最后一个“工作”配置，因此我收到此错误：ReferenceError:Shado 查看详情

quasar框架引入elementui组件

在使用quasar框架时，不能满足部分需求，例如quasar不支持级联组件、table树形数据，因此引入elementui插件。一直以为在quasar项目中执行：npmielement-ui-S然后在main.js中全局引入：，然而并不是~，这样引入使用elementui组件时会报组件... 查看详情

京东开源的轻量级移动端vue2vue3组件库

...支持TypeScript支持服务端渲染（测试阶段）支持定制主题单元测试覆盖（3.0开发中），保障稳定性提供Sketch设计资源查看详情

正文