Getting CRA error when trying to run jest test runner after installing recat-app-rewired

[edmundsj]

I recently installed react-app-rewired to allow me to modify jest's testEnvironment while using the jest test runner without getting the CRA error that blocks it from running. I currently use two methods to run my tests: npm run test, which uses the jest test runner to run my test suite. This, for some reason, works just fine. And my IDE (Pycharm), which also uses the Jest test runner, but for some reason throws an error:

Out of the box, Create React App only supports overriding these Jest options:

  • clearMocks
  • collectCoverageFrom
  • coveragePathIgnorePatterns
  • coverageReporters
  • coverageThreshold
  • displayName
  • extraGlobals
  • globalSetup
  • globalTeardown
  • moduleNameMapper
  • resetMocks
  • resetModules
  • restoreMocks
  • snapshotSerializers
  • testMatch
  • transform
  • transformIgnorePatterns
  • watchPathIgnorePatterns.

These options in your package.json Jest configuration are not currently supported by Create React App:

  • testEnvironment
  • verbose

If you wish to override other Jest options, you need to eject from the default setup. You can do so by running npm run eject but remember that this is a one-way operation. You may also file an issue with Create React App to discuss supporting more options out of the box.


Process finished with exit code 1

If I uncomment the "jest" entry in my package.json file (see below), then the PyCharm test runner works just fine, but my npm run test output gives errors, which is why I modified package.json in the first place:

FAIL src/components/login/Login.test.js
  ● Should render succesfully with some hard-coded value props

    The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
    Consider using the "jsdom" test environment.

    ReferenceError: document is not defined

      13 | let root = null;
      14 | beforeEach(() => {
    > 15 |     container = document.createElement('div');
         |     ^
      16 |     document.body.appendChild(container);
      17 | })
      18 |

      at Object.<anonymous> (src/components/login/Login.test.js:15:5)

package.json:

{
  "name": "react-play",
  "version": "0.1.0",
  "private": true,
  "jest": {
    "testEnvironment": "jsdom",
	"verbose": true
  },
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^29.0.1",
    "@types/node": "^18.7.16",
    "@types/react": "^18.0.19",
    "@types/react-dom": "^18.0.6",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "chai": "^4.3.6",
    "coverage": "^0.4.1",
    "husky": "^8.0.1",
    "js-cookie": "^3.0.1",
    "mocha": "^10.0.0",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.1",
    "react-scripts": "5.0.1",
    "reactstrap": "^9.1.4",
    "sass": "^1.54.8",
    "selenium-webdriver": "^4.4.0",
    "typescript": "^4.8.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "./.run_test.sh",
    "test-report": "jest --coverage --collectCoverageFrom=src/**/*.{js,jsx}; open ./coverage/lcov-report/index.html",
    "eject": "react-scripts eject",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "babel-jest": "^29.0.2",
    "chromedriver": "^105.0.0",
    "jest": "^27.5.1",
    "lodash": "^4.17.21",
    "react-app-rewired": "^2.2.1",
    "react-test-renderer": "^18.2.0"
  }
}

config-override:

/* config-overrides.js */

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

My understanding was that this package allows me to override CRA Jest options directly from package.json, as the documentation explicitly indicates in the section on jest testing. The whole reason I installed this package was to solve this problem, am I missing something obvious? Forgive my ignorance if I'm doing something obviously stupid to you, I just started working with JS a couple weeks ago.