reactjstypescriptjestjsreact-testing-library

React Test Error: ReferenceError: global is not defined


I'm newish to React and React Testing. I've been taking an Udemy course that is a few years old and some things are out of date. I got things updated with a lot of work. I can build, I can start the app. However, my once working tests now fail with this error:

Test suite failed to run
    ReferenceError: global is not defined
      at Object.<anonymous> (node_modules/graceful-fs/graceful-fs.js:92:1)
      at Object.<anonymous> (node_modules/expect/build/toThrowMatchers.js:10:24)
      at Object.<anonymous> (node_modules/expect/build/index.js:35:48)

I ran a command I found in github about this issue:

$ npm list jest
react-testing@0.1.0 C:\Users\636309\Notes\React\ReactTesting\Udemy2HourCourseReactTesting\react-testingCopy
├─┬ react-scripts@5.0.1
│ ├─┬ jest-watch-typeahead@1.1.0
│ │ └── jest@27.5.1 deduped invalid: "^29.0.0" from node_modules/ts-jest
│ └── jest@27.5.1 invalid: "^29.0.0" from node_modules/ts-jest
└─┬ ts-jest@29.2.4
  └── jest@27.5.1 deduped invalid: "^29.0.0" from node_modules/ts-jest

npm error code ELSPROBLEMS
npm error invalid: jest@27.5.1 C:\Users\steve\Notes\React\ReactTesting\Udemy2HourCourseReactTesting\react-testingCopy\node_modules\jest
npm error A complete log of this run can be found in: C:\development\npmCache\_logs\2024-08-10T03_18_02_069Z-debug-0.log

Here is a copy of my package.json:

{
  "name": "react-testing",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/dom": "^10.4.0",
    "@types/node": "^22.1.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "axios": "^1.7.3",
    "invariant": "^2.2.4",
    "levenary": "^1.1.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.8",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "ts-jest": "^29.2.4",
    "typescript": "~5.5.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jest-environment-jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx,js,jsx}",
      "!src/serviceWorker.ts",
      "!src/index.tsx",
      "!src/**/*.d.ts"
    ]
  }
}

Any clues?


Solution

  • Jest v26 and later ship with JSDOM@16, so there's no reason to use this package anymore.

    [Source]

    You are using 27 version of Jest, so you no longer need the jest-environment-jsdom-sixteen package.

    If you replace your package.json file with this below and then run yarn install or npm install, everything should work. I've also tested it. ( after runing npm test the ReferenceError: global is not defined error disappeared )

    for resolving the error regarding npm list jest:

    it because your jest version is outdated ( 27.5.1 ) for current ts-jest, so you need to update package.json and add "jest": "^29.7.0", to the devDependencies or run yarn add --dev jest on the project directory

    I've try with the second solution and it works

    macbook@Macbooks-MacBook-Air react-testing % npm list jest
    
        react-testing@0.1.0 /Users/macbook/Desktop/test/react-testing
        ├── jest@29.7.0
        ├─┬ react-scripts@5.0.1
        │ ├─┬ jest-watch-typeahead@1.1.0
        │ │ └── jest@27.5.1
        │ └── jest@27.5.1
        └─┬ ts-jest@29.2.4
          └── jest@29.7.0 deduped
    

    package.json

    {
      "name": "react-testing",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/dom": "^10.4.0",
        "@types/node": "^22.1.0",
        "@types/react": "^18.3.3",
        "@types/react-dom": "^18.3.0",
        "axios": "^1.7.3",
        "invariant": "^2.2.4",
        "levenary": "^1.1.1",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-scripts": "5.0.1"
      },
      "devDependencies": {
        "@testing-library/jest-dom": "^6.4.8",
        "@testing-library/react": "^16.0.0",
        "@testing-library/user-event": "^14.5.2",
        "@types/jest": "^29.5.12",
         "jest": "^29.7.0",
        "ts-jest": "^29.2.4",
        "typescript": "~5.5.4"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jest-environment-jsdom",
        "coverage": "yarn test --coverage --watchAll=false",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "jest": {
        "collectCoverageFrom": [
          "src/**/*.{ts,tsx,js,jsx}",
          "!src/serviceWorker.ts",
          "!src/index.tsx",
          "!src/**/*.d.ts"
        ]
      }
    }