与类星体的Vitest集成

Question

我一直试图将Vitest与一个实现类星体的项目结合起来，但我没有成功地做到这一点。在测试时，我面临的主要问题是类星体组件没有在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标记。类星体是否有可能与最具活力的星体相结合？如果是的话，你能告诉我应该怎么做吗？

提亚

Answer 1

OP在类星体存储库的这个GitHub的讨论上找到了他们的答案。我把它连接到这里给未来的流浪者。

对于任何面临同样问题的人，我只是让它使用@yusufkandemir推荐，但与我之前展示的方法不同。我将让我的代码在下面: vite.config.ts： 从“@vitejs/plugins”导入{ defineConfig }，从“@ quasar /vite-plugin”// https://vitejs.dev/config/导出默认defineConfig({ test：{ environment：'jsdom‘}，plugins: vue({ template：{ transformAssetUrls })，类quasar({ src/quasar-variables.sass })，}) 类星体插件的测试实现： 从“@vue/ test -utils”从“./components/ HelloWorld .vue”导入HelloWorld导入{类星体}“HelloWorld，{ wrapperFactory = () =>挂载”(HelloWorld，{全局：{ plugins:类星体}，})测试(‘装入组件’，() => {=>{HelloWorld).toBeTruthy()；const包装器=wrapperFactory；console.log(wrapper.html())；}) 现在，当它从包装器中打印html时，类星体元素被显示为简单的HTML元素。