Vitest 与 Quasar 的集成

Question

我一直在尝试将 Vitest 与实现 Quasar 的项目集成，但我没有成功。我在测试时面临的主要问题是类星体组件未在 HTML 元素中呈现，因此当我尝试在元素上设置文本时，vitest 不会将其识别为 HTML 元素，我得到下一个错误：

Error: wrapper.setValue() cannot be called on Q-INPUT
 ❯ DOMWrapper.setValue node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7417:19
 ❯ src/modules/Auth/LoginView.spec.ts:8:60
      6|   const wrapper = mount(LoginView)
      7|   test('should render correctly', async() => {
      8|     const inputEmail = await wrapper.get('[label="Email"]').setValue('andres@correo.com')
       |

我尝试了 console.log(wrapper.get('[label="Email"]').html()) 并得到了以下结果：

<q-input type="text" filled="" label="Email" placeholder="correo@correo.com" lazy-rules="" modelvalue="" rules="(val) => val &amp;&amp; val.length > 0 || &quot;El correo es obligatorio&quot;,(val) => {
  const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/;
  return emailPattern.test(val) || &quot;No es un correo valido&quot;;
}" data-v-5d16ad28=""></q-input>

如您所见，该元素并未“转换”为 HTML 标记。是否有可能将 quasar 与 vitest 集成？如果是，请告诉我应该如何？

TIA

Answer 1

OP 在 Quasar 存储库的 this GitHub discussion 上找到了他们的答案。我在这里链接它以供将来的流浪者使用。

For anyone facing the same issue, I just made it work with @yusufkandemir recommendation but with a different approach than the one I showed before. I'll let my code below: vite.config.ts:

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    environment: 'jsdom'
  },
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    quasar({
      sassVariables: 'src/quasar-variables.sass'
    })
  ],
})

Implementation of quasar plugin in test:

import { test, expect, describe } from 'vitest'
import { mount } from '@vue/test-utils'
import { Quasar } from 'quasar'

import HelloWorld from "../components/HelloWorld.vue"

const wrapperFactory = () => mount(HelloWorld, {
  global: {
    plugins: [Quasar]
  },
})

test('mount component', () => {
  expect(HelloWorld).toBeTruthy();
  const wrapper = wrapperFactory();

  console.log(wrapper.html());
})

Now, when it prints the html from the wrapper, Quasar elements are being shown as simple HTML elements.

Vitest 与 Quasar 的集成

Vitest integration with Quasar

vue.js

quasar

quasar-framework

vite

vitest