Vue3+Vitest测试Quasar QDrawer时$layout.totalWidth未定义报错解决

问题场景 #

在Vue 3项目中使用Vitest编写单元测试，测试包含Quasar QDrawer组件的自定义组件时，点击触发抽屉显示后，抛出$layout.totalWidth.value未定义的类型错误。

报错信息 #

TypeError: Cannot read properties of undefined (reading 'value')
 ❯ setup node_modules/quasar/src/components/drawer/QDrawer.js:88:62
     86|     const belowBreakpoint = ref(
     87|       props.behavior === 'mobile'
     88|       || (props.behavior !== 'desktop' && $layout.totalWidth.value <= props.breakpoint)
       |                                                              ^
     89|     )

相关组件代码片段 #

...
<div v-if="origemParagrafoPadrao === 'previo'">
    <div>
      <q-btn @click="drawerParagrafoPadrao = !drawerParagrafoPadrao" dense no-caps color="primary" label="Escolher parágrafo padrão" class="q-my-md" icon-right="arrow_right"/>
    </div>
    <div>
      <q-card flat bordered v-for="texto in selecaoTextoAutuacao" :key="texto.id">
        <q-card-section>
          <div class="flex">
            <h6 class="text-subtitle2 text-weight-bold">{{ texto.id }} - {{ texto.titulo }}</h6>
            <a class="q-link text-primary cursor-pointer q-ml-xs" :id="'lnkExcluirTextoJurisprudencia' + texto.id"
                @click="excluirTextoParagrafoPadrao(texto)">
              ( Excluir )
            </a>
          </div>
          <div v-html="texto.texto" style="white-space: pre-wrap;"></div>
        </q-card-section>
      </q-card>
    </div>
    <q-drawer v-model="drawerParagrafoPadrao" side="right" :breakpoint="10" bordered  class="shadow-2 rounded-borders" :width="900">
      <div class="flex justify-between items-center q-ma-md">
...

解决方法 #

方法1：模拟$layout全局对象 #

在测试的render配置中，通过global.mocks注入模拟的$layout对象，给totalWidth.value设置一个合理数值（比如大于组件中设置的breakpoint值10）：

render(Paragraph, {
    props: { analise: analise, textosAutuacao: autuacao },
    global: {
        plugins: [Quasar],
        mocks: {
          $layout: {
            totalWidth: { value: 1200 } // 模拟窗口宽度大于断点值
          }
        }
    }
})

方法2：强制QDrawer使用desktop行为 #

修改QDrawer的behavior属性为desktop，组件会跳过基于窗口宽度的断点判断，也就不会访问$layout.totalWidth：

<q-drawer 
  v-model="drawerParagrafoPadrao" 
  side="right" 
  :breakpoint="10" 
  bordered  
  class="shadow-2 rounded-borders" 
  :width="900"
  behavior="desktop" <!-- 添加该属性 -->
>

方法3：使用Quasar测试工具初始化布局环境 #

如果项目引入了@quasar/quasar-app-extension-testing-unit-vitest，可以通过setupQuasarTesting工具初始化完整的Quasar测试环境，自动提供$layout等全局对象：

import { setupQuasarTesting } from '@quasar/quasar-app-extension-testing-unit-vitest'

setupQuasarTesting()

// 执行测试渲染
render(Paragraph, {
    props: { analise: analise, textosAutuacao: autuacao },
    global: {
        plugins: [Quasar]
    }
})

内容的提问来源于stack exchange，提问作者Thiago