Vitest 与 Quasar 集成

Question

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

\n

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

\n

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

\n

<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) => {\n  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}$/;\n  return emailPattern.test(val) || &quot;No es un correo valido&quot;;\n}" data-v-5d16ad28=""></q-input>\n

\n

正如您所看到的，该元素没有被“转换”为 HTML 标记。是否有可能将 quasar 与 vitest 集成？如果是的话，您能告诉我应该如何吗？

\n

TIA

\n

Answer 1

OP 在Quasar 存储库的GitHub 讨论中找到了答案。我将其链接到这里供未来的流浪者使用。

对于面临同样问题的人，我只是按照@yusufkandemir 的建议使其工作，但采用了与我之前展示的方法不同的方法。我将让我的代码如下：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'
    })
  ],
})

测试中quasar插件的实现：

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());
})

现在，当它从包装器打印 html 时，Quasar 元素将显示为简单的 HTML 元素。