{"id":670,"hash":"a35c9ae06c5a4baa26104120ce3e1a0b1ecb10e3aba00e9218572563311fe214","pattern":"ReferenceError: document is not defined - testing with vitest","full_message":"I am woking on a Vite project using react framework.\nI write some test cases for my app using vitest when I run the test I see the following error\n\n FAIL  tests/Reservations.test.jsx > Reservations Component > displays error for invalid number of guests exceeding maximum\nReferenceError: document is not defined\n ❯ Proxy.render node_modules/@testing-library/react/dist/pure.js:215:5\n ❯ tests/Reservations.test.jsx:28:9\n     26| \n     27|     it(\"displays error for invalid number of guests exceeding maximum\", () => {\n     28|         render(<Reservations />)\n       |         ^\n     29|         fireEvent.change(screen.getByLabelText(/Number of Guests/i), { target: { value: \"15\" } })\n     30|         fireEvent.click(screen.getByText(/Make your reservation/i))\n\nHeres my test code\n\nimport { Reservations } from \"../src/components\"\nimport { render, screen, fireEvent } from \"@testing-library/react\"\nimport { expect, describe, it } from \"vitest\"\n\ndescribe(\"Reservations Component\", () => {\n    it(\"renders the 'Book Your Table Now' page title\", () => {\n        render(<Reservations />)\n        const pageTitle = screen.getByText(/Book Your Table Now/i)\n        expect(pageTitle).toBeInTheDocument()\n    })\n\n    it(\"displays error for missing date when submitting\", () => {\n        render(<Reservations />)\n        fireEvent.click(screen.getByText(/Make your reservation/i))\n        const errorMessage = screen.getByText(/Please choose a date/i)\n        expect(errorMessage).toBeInTheDocument()\n    })\n\n    it(\"displays error for invalid time outside allowed range\", () => {\n        render(<Reservations />)\n        fireEvent.change(screen.getByLabelText(/Choose Time/i), { target: { value: \"14:00\" } })\n        fireEvent.click(screen.getByText(/Make your reservation/i))\n        const errorMessage = screen.getByText(/Please choose a time between 5:00 PM and 10:00 PM/i)\n        expect(errorMessage).toBeInTheDocument()\n    })\n\n    it(\"displays error for invalid number of guests exceeding maximum\", () => {\n        render(<Reservations />)\n        fireEvent.change(screen.getByLabelText(/Number of Guests/i), { target: { value: \"15\" } })\n        fireEvent.click(screen.getByText(/Make your reservation/i))\n        const errorMessage = screen.getByText(/Please choose a guests between 1 and 10/i)\n        expect(errorMessage).toBeInTheDocument()\n    })\n})\n\nhere is the vite.config.js file\n\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  test: {\n    globals: true,\n    include: [\"src/**/*.test.js\", \"tests/**/*.test.js\"],\n    parallel: true,\n  },\n});\n\nI tried the following options.\n\ndelete the node modules folder and install it again.\ndouble check the testing environment.\ndouble check the code.\nsee the documentation","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"Have you tried to specify the test environment like this:\n\nexport default defineConfig({\n  test: {\n    globals: true,\n    environment: \"jsdom\",\n    // ...\n  },\n...\n}\n\nYou have to install jsdom as a dependency, too.\n\nSee those links for further information:\n\nhttps://stackoverflow.com/a/70771291/11091599\nhttps://github.com/vitest-dev/vitest/issues/990","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/77713195/referenceerror-document-is-not-defined-testing-with-vitest","votes":20,"created_at":"2026-04-19T04:51:28.850954+00:00","updated_at":"2026-04-19T04:51:28.850954+00:00"}