我一直在尝试将 Vitest 与实现 Quasar 的项目集成,但我没有成功。我在测试时面临的主要问题是 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 && val.length > 0 || "El correo es obligatorio",(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) || "No es un correo valido";
}" data-v-5d16ad28=""></q-input>
如您所见,该元素并未“转换”为 HTML 标记。是否有可能将 quasar 与 vitest 集成?如果是,请告诉我它应该如何?
TIA
最佳答案
OP 在 this GitHub discussion 上找到了答案在 Quasar 的存储库上。我在这里链接它以供 future 的流浪者使用。
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. ?
https://stackoverflow.com/questions/71486252/