Getting error: ReferenceError: document is not defined
Leif-Frederiksen opened this issue · 8 comments
When I use the simple "useCounter" example in my project, I get this error message from the test:
ReferenceError: document is not defined
My package.json looks like this:
"dependencies": {
"@microsoft/sp-core-library": "1.16.0-beta.1",
"@microsoft/sp-lodash-subset": "1.16.0-beta.1",
"@microsoft/sp-office-ui-fabric-core": "1.16.0-beta.1",
"@microsoft/sp-property-pane": "1.16.0-beta.1",
"@microsoft/sp-webpart-base": "1.16.0-beta.1",
"@pnp/sp": "^3.8.0",
"@pnp/spfx-controls-react": "^3.11.0",
"office-ui-fabric-react": "7.192.0",
"react": "16.13.1",
"tslib": "2.3.1"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.16.0-beta.1",
"@microsoft/eslint-plugin-spfx": "1.16.0-beta.1",
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@microsoft/sp-build-web": "1.16.0-beta.1",
"@microsoft/sp-module-interfaces": "1.16.0-beta.1",
"@rushstack/eslint-config": "2.5.1",
"@testing-library/react-hooks": "^8.0.1",
"@types/jest": "^29.2.0",
"@types/react": "16.9.51",
"@types/react-dom": "16.9.8",
"@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"jest": "^29.2.2",
"jest-junit": "^14.0.1",
"react-test-renderer": "^16.13.1",
"spfx-fast-serve-helpers": "~1.16.0-beta.0",
"ts-jest": "^29.0.3",
"typescript": "4.5.5"
}
Can you see if I am using the wrong versions of some package, or what else could be wrong?
Try adding this comment block to the top of the file that contains the tests:
/**
* @jest-environment jsdom
*/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"
}
}
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!
After installed the
jest-environment-jsdomas devDependency and added the/** * @jest-environment jsdom */at the top of the test file, the error was gone!
This worked for me
After installed the
jest-environment-jsdomas devDependency and added the/** * @jest-environment jsdom */at the top of the test file, the error was gone!
This worked for me
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?
/**
- @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.