[BUG]: ReferenceError: document is not defined

[Maxim-Mazurok]

Description of the bug

npm ci && vitest doesn't work:

maxim@64QHKR3:~/vue3-vuetify-tests$ npm ci
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 179 packages, and audited 180 packages in 5s

7 packages are looking for funding
  run `npm fund` for details

2 vulnerabilities (1 moderate, 1 critical)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
maxim@64QHKR3:~/vue3-vuetify-tests$ vitest

 DEV  v0.5.9 /home/maxim/vue3-vuetify-tests

 ❯ src/components/__tests__/HelloWorld.spec.js (1)
   ❯ HelloWorld (1)
     × renders properly

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

 FAIL  src/components/__tests__/HelloWorld.spec.js > HelloWorld > renders properly
ReferenceError: document is not defined
 ❯ Proxy.mount node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7840:14
    7838|     addToDoNotStubComponents(component);
    7839|     registerStub({ source: originalComponent, stub: component });
    7840|     var el = document.createElement('div');
       |              ^
    7841|     if (options === null || options === void 0 ? void 0 : options.attachTo) {
    7842|         var to = void 0;
 ❯ src/components/__tests__/HelloWorld.spec.js:12:24

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

Test Files  1 failed (1)
     Tests  1 failed (1)
      Time  2.50s (in thread 5ms, 52989.24%)

 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

Steps To Reproduce

1. npm ci
2. vitest

Additional Information

npx envinfo

  System:
    OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Memory: 40.32 GB / 49.95 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Managers:
    Apt: 2.4.8 - /usr/bin/apt
    pip3: 22.0.2 - /usr/bin/pip3
  Utilities:
    Make: 4.3 - /usr/bin/make
    GCC: 11.3.0 - /usr/bin/gcc
    Git: 2.34.1 - /usr/bin/git
    FFmpeg: 4.4.2 - /usr/bin/ffmpeg
  Virtualization:
    Docker: 4.3.1 - /usr/bin/docker
  IDEs:
    Nano: 6.2 - /usr/bin/nano
    VSCode: 1.74.2 - /mnt/c/Users/maxim.mazurok/AppData/Local/Programs/Microsoft VS Code/bin/code
    Vim: 8.2 - /usr/bin/vim
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
    Perl: 5.34.0 - /usr/bin/perl
    PHP: 8.1.2 - /usr/bin/php
    Python: 3.10.6 - /usr/bin/python
    Python3: 3.10.6 - /usr/bin/python3
  Browsers:
    Chrome: 108.0.5359.124

[Maxim-Mazurok]

Fixed by adding test.environment: "happy-dom" to the vite.config.js

[Maxim-Mazurok]

Actually, seems like we already have jsdom in deps, so it worked as well.

[Maxim-Mazurok]

Also npm ci doesn't work on npm@8.19.2 might want to run npm i instead, hope it helps