Getting error: ReferenceError: document is not defined about react-hooks-testing-library HOT 8 CLOSED

Try adding this comment block to the top of the file that contains the tests:

/**
 * @jest-environment jsdom
 */

from react-hooks-testing-library.

After installed the jest-environment-jsdom as devDependency and added the

/**
 * @jest-environment jsdom
 */

at the top of the test file, the error was gone!

from react-hooks-testing-library.

from react-hooks-testing-library.

Same issue when I use vitest as the testing container to run the useCounter demo test.

And my package.json as below:

{
  "name": "hooks-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "bunx --bun vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.5",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "jest": "^29.7.0",
    "react-test-renderer": "^18.2.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vitest": "^0.34.4"
  }
}

from react-hooks-testing-library.

After installed the jest-environment-jsdom as devDependency and added the

/**
 * @jest-environment jsdom
 */

at the top of the test file, the error was gone!

This worked for me

from react-hooks-testing-library.

After installed the jest-environment-jsdom as devDependency and added the

/**
 * @jest-environment jsdom
 */

at the top of the test file, the error was gone!

This worked for me

from react-hooks-testing-library.

Try adding this comment block to the top of the file that contains the tests:

/**
 * @jest-environment jsdom
 */

It also worked for me. But why?

from react-hooks-testing-library.

/**

• @jest-environment jsdom
  */

it specifies the environment in which the tests should run. In Jest, the testing environment can be Node.js, jsdom, or Jest's default pseudo-browser environment. The @jest-environment jsdom comment tells Jest to use jsdom as the testing environment.

jsdom is a library that emulates a web browser environment, allowing you to run tests within a Node.js context without the need for an actual browser. This is particularly useful for testing web applications' DOM manipulations and browser APIs, as it can simulate a full browser environment, including the Document Object Model (DOM) and the browser window object (window).

In short, when you see @jest-environment jsdom at the top of a test file, it means that all the tests will be run in a simulated browser environment rather than in a Node.js environment. This is very helpful for testing code that relies on browser-specific features.

from react-hooks-testing-library.