I am woking on a Vite project using react framework. I write some test cases for my app using vitest when I run the test I see the following error

 FAIL  tests/Reservations.test.jsx > Reservations Component > displays error for invalid number of guests exceeding maximum
ReferenceError: document is not defined
 ❯ Proxy.render node_modules/@testing-library/react/dist/pure.js:215:5
 ❯ tests/Reservations.test.jsx:28:9
     26| 
     27|     it("displays error for invalid number of guests exceeding maximum", () => {
     28|         render(<Reservations />)
       |         ^
     29|         fireEvent.change(screen.getByLabelText(/Number of Guests/i), { target: { value: "15" } })
     30|         fireEvent.click(screen.getByText(/Make your reservation/i))

Heres my test code

import { Reservations } from "../src/components"
import { render, screen, fireEvent } from "@testing-library/react"
import { expect, describe, it } from "vitest"

describe("Reservations Component", () => {
    it("renders the 'Book Your Table Now' page title", () => {
        render(<Reservations />)
        const pageTitle = screen.getByText(/Book Your Table Now/i)
        expect(pageTitle).toBeInTheDocument()
    })

    it("displays error for missing date when submitting", () => {
        render(<Reservations />)
        fireEvent.click(screen.getByText(/Make your reservation/i))
        const errorMessage = screen.getByText(/Please choose a date/i)
        expect(errorMessage).toBeInTheDocument()
    })

    it("displays error for invalid time outside allowed range", () => {
        render(<Reservations />)
        fireEvent.change(screen.getByLabelText(/Choose Time/i), { target: { value: "14:00" } })
        fireEvent.click(screen.getByText(/Make your reservation/i))
        const errorMessage = screen.getByText(/Please choose a time between 5:00 PM and 10:00 PM/i)
        expect(errorMessage).toBeInTheDocument()
    })

    it("displays error for invalid number of guests exceeding maximum", () => {
        render(<Reservations />)
        fireEvent.change(screen.getByLabelText(/Number of Guests/i), { target: { value: "15" } })
        fireEvent.click(screen.getByText(/Make your reservation/i))
        const errorMessage = screen.getByText(/Please choose a guests between 1 and 10/i)
        expect(errorMessage).toBeInTheDocument()
    })
})

here is the vite.config.js file

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// /config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    include: ["src/**/*.test.js", "tests/**/*.test.js"],
    parallel: true,
  },
});

I tried the following options.

• delete the node modules folder and install it again.
• double check the testing environment.
• double check the code.
• see the documentation

I am woking on a Vite project using react framework. I write some test cases for my app using vitest when I run the test I see the following error

 FAIL  tests/Reservations.test.jsx > Reservations Component > displays error for invalid number of guests exceeding maximum
ReferenceError: document is not defined
 ❯ Proxy.render node_modules/@testing-library/react/dist/pure.js:215:5
 ❯ tests/Reservations.test.jsx:28:9
     26| 
     27|     it("displays error for invalid number of guests exceeding maximum", () => {
     28|         render(<Reservations />)
       |         ^
     29|         fireEvent.change(screen.getByLabelText(/Number of Guests/i), { target: { value: "15" } })
     30|         fireEvent.click(screen.getByText(/Make your reservation/i))

Heres my test code

import { Reservations } from "../src/components"
import { render, screen, fireEvent } from "@testing-library/react"
import { expect, describe, it } from "vitest"

describe("Reservations Component", () => {
    it("renders the 'Book Your Table Now' page title", () => {
        render(<Reservations />)
        const pageTitle = screen.getByText(/Book Your Table Now/i)
        expect(pageTitle).toBeInTheDocument()
    })

    it("displays error for missing date when submitting", () => {
        render(<Reservations />)
        fireEvent.click(screen.getByText(/Make your reservation/i))
        const errorMessage = screen.getByText(/Please choose a date/i)
        expect(errorMessage).toBeInTheDocument()
    })

    it("displays error for invalid time outside allowed range", () => {
        render(<Reservations />)
        fireEvent.change(screen.getByLabelText(/Choose Time/i), { target: { value: "14:00" } })
        fireEvent.click(screen.getByText(/Make your reservation/i))
        const errorMessage = screen.getByText(/Please choose a time between 5:00 PM and 10:00 PM/i)
        expect(errorMessage).toBeInTheDocument()
    })

    it("displays error for invalid number of guests exceeding maximum", () => {
        render(<Reservations />)
        fireEvent.change(screen.getByLabelText(/Number of Guests/i), { target: { value: "15" } })
        fireEvent.click(screen.getByText(/Make your reservation/i))
        const errorMessage = screen.getByText(/Please choose a guests between 1 and 10/i)
        expect(errorMessage).toBeInTheDocument()
    })
})

here is the vite.config.js file

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    include: ["src/**/*.test.js", "tests/**/*.test.js"],
    parallel: true,
  },
});

I tried the following options.

• delete the node modules folder and install it again.
• double check the testing environment.
• double check the code.
• see the documentation

• javascript
• reactjs
• testing
• vite
• vitest

1 Answer 1

Have you tried to specify the test environment like this:

export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    // ...
  },
...
}

You have to install jsdom as a dependency, too.

See those links for further information:

• https://stackoverflow.com/a/70771291/11091599
• https://github.com/vitest-dev/vitest/issues/990