Test failing due to deprecated QEditor function

[arnonrdp]

What happened?

When running vitest I receive the following error:

[Vue warn]: Component is missing template or render function. 
  at <QEditor class="q-mt-md" dense="" flat=""  ... > 
  at <QField counter="" label="Description" maxlength="400"  ... > 
  at <QForm autocorrect="off" autocapitalize="off" autocomplete="off"  ... > 
  at <QCardSection class="q-pt-none" > 
  at <QCard> 
  at <PromptCard ref="VTU_COMPONENT" > 
  at <VTUROOT>

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/components/__tests__/MainMenu.spec.js > Main Menu Component > should open the "PromptCard" component
TypeError: document.execCommand is not a function
 ❯ setup node_modules/quasar/src/components/editor/QEditor.js:102:16
    100| 
    101|     if (__QUASAR_SSR_SERVER__ !== true) {
    102|       document.execCommand('defaultParagraphSeparator', false, props.paragraphTag)
       |                ^
    103|       defaultFont = window.getComputedStyle(document.body).fontFamily
    104|     }
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:171:22
 ❯ setupStatefulComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7194:29
 ❯ setupComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7149:11
 ❯ mountComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5480:13
 ❯ processComponent node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5455:17
 ❯ patch node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5059:21
 ❯ mountChildren node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5242:13
 ❯ mountElement node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5153:13
 ❯ processElement node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5136:13

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

What did you expect to happen?

I was hoping the test wasn't interrupted by an error in the node_modules/quasar folder

Reproduction URL

N/A

How to reproduce?

I didn't create a replay URL as it's not applicable to use the command line in one of them.

To reproduce the error it is necessary to create a q-editor, in my case my q-editor is encapsulated inside a q-field:

<q-field counter label="Description" maxlength="400" v-model="prompt.description">
  <template v-slot:control>
    <q-editor
      class="q-mt-md"
      dense
      flat
      min-height="5rem"
      ref="editorRef"
      :toolbar="[
        [
          {
            icon: $q.iconSet.editor.align,
            options: ['left', 'center', 'right', 'justify']
          },
          {
            icon: $q.iconSet.editor.fontSize,
            list: 'no-icons',
            options: ['size-1', 'size-2', 'size-3', 'size-4', 'size-5', 'size-6', 'size-7']
          },
          {
            icon: $q.iconSet.editor.formatting,
            options: ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript', 'quote', 'unordered', 'ordered']
          },
          ['link']
        ],
        ['undo', 'redo']
      ]"
      v-model="prompt.description"
      @paste="onPaste($event)"
    />
  </template>
</q-field>

Then run vitest.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), PWA Mode

Platforms/Browsers

Other

Quasar info output

Operating System - Darwin(22.3.0) - darwin/arm64
NodeJs - 18.15.0

Global packages
  NPM - 9.5.0
  yarn - 1.22.19
  @quasar/cli - 2.0.0
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.11.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.2.1 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.15.11 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.47 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - 2.0.32 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.15 -- Native-ESM powered web dev build tool
  eslint - 8.35.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-unit-vitest - 0.1.2 -- A Quasar App Extension for running tests with Vitest

Networking
  Host - MacBook-Air-Arnon.local
  en0 - 192.168.1.8

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @arnonrdp! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[rettigd]

I ran into this issue too. Since execCommand is not implemented in jsdom or happy-dom, I was able to get past this by mocking it. Add global.document.execCommand = vi.fn() in the test.

[henriqueWebDev]

Hi, i managed to solve this

I mocked the execCommand function before mounting the component.

window.document.execCommand = vi.fn() (vitest)

window.document.execCommand = jest.fn(); (jest)