ReferenceError: document is not defined

[peterroe]

Describe the bug

demo online: https://stackblitz.com/edit/vitest-dev-vitest-gnawnk?file=vite.config.ts&initialPath=__vitest__

 FAIL  test/suite.test.ts > my vue component > should render
ReferenceError: document is not defined
 ❯ Proxy.mount node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:7757:14
 ❯ eval test/suite.test.ts:7:20
      5| describe('my vue component', () => {
      6|   it('should render', () => {
      7|     const wrapper = mount(MyComponent);
       |                    ^
      8|     expect(wrapper.html()).toMatchSnapshot();
      9|   });

Reproduction

No need.

System Info

No need.

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stygian-desolator]

https://vitest.dev/config/#environment

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom'
  },
});

[peterroe]

https://vitest.dev/config/#environment

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom'
  },
});

Thank you so much!

[SoetZombie]

https://vitest.dev/config/#environment

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom'
  },
});

How do we do this when compiler options are set to esnext?

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",

TS2345: Argument of type '{ plugins: Plugin[]; test: { globals: boolean; environment: string; }; resolve: { alias: { '@': string; }; }; server: { https: true; }; css: { preprocessorOptions: { sass: { additionalData: string; }; scss: { ...; }; }; }; }' is not assignable to parameter of type 'UserConfigExport'.   Object literal may only specify known properties, and 'test' does not exist in type 'UserConfigExport'.

[Martin-Karsten]

https://vitest.dev/config/#environment

export default defineConfig({
  plugins: [vue()],
  test: {
    environment: 'happy-dom'
  },
});

How do we do this when compiler options are set to esnext?

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",

TS2345: Argument of type '{ plugins: Plugin[]; test: { globals: boolean; environment: string; }; resolve: { alias: { '@': string; }; }; server: { https: true; }; css: { preprocessorOptions: { sass: { additionalData: string; }; scss: { ...; }; }; }; }' is not assignable to parameter of type 'UserConfigExport'.   Object literal may only specify known properties, and 'test' does not exist in type 'UserConfigExport'.

You can define the environment in your package.json script. For example like this

"scripts": {
  "test": "vitest --environment jsdom"
}

[isimmons]

I had to reference the vitest types at the top of my vite.config.ts . Otherwise "test" is not a known property so typescript throws the error about test not being assignable to UserConfigExport

/// <reference types="vitest" />
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  test: {
    environment: "happy-dom",
  },
});

[peterroe]

@isimmons You are right, check here please: https://vitest.dev/guide/#configuring-vitest