TypeError: CSS.supports is not a function in test

[Shermayster]

I'm using react-date-picker, after updating to the latest version I got the error in tests.

For tests, I'm using react-create-library with jest.

my packege.json is:

"dependencies": {
    "@reach/router": "^1.2.1",
    "jwt-decode": "^2.2.0",
    "keyboardjs": "^2.5.1",
    "password-validator": "^4.1.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^0.2.0",
    "react-aria-menubutton": "^6.1.0",
    "react-date-picker": "^7.5.0",
    "react-dom": "^16.8.6",
    "react-flexbox-grid": "^2.1.2",
    "react-icons": "^3.5.0",
    "react-intl": "^2.8.0",
    "react-modal": "^3.8.1",
    "react-scripts": "2.1.8",
    "react-transition-group": "^2.7.1",
    "react-use": "^7.3.1",
    "rebound": "^0.1.0",
    "rxjs": "^6.4.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "storybook-build": "build-storybook -c .storybook -o .out"
  },
  "devDependencies": {
    "@babel/runtime": "^7.4.2",
    "@sambego/storybook-state": "^1.3.4",
    "@storybook/addon-a11y": "^5.0.6",
    "@storybook/addon-actions": "^5.0.6",
    "@storybook/addon-info": "^5.0.6",
    "@storybook/addon-knobs": "^5.0.6",
    "@storybook/addon-links": "^5.0.6",
    "@storybook/addon-viewport": "^5.0.6",
    "@storybook/addons": "^5.0.6",
    "@storybook/client-logger": "^5.0.6",
    "@storybook/react": "^5.0.6",
    "@types/jest": "^24.0.11",
    "@types/jwt-decode": "^2.2.1",
    "@types/node": "^11.12.2",
    "@types/reach__router": "^1.2.3",
    "@types/react": "^16.8.10",
    "@types/react-aria-menubutton": "^6.2.0",
    "@types/react-dom": "^16.8.3",
    "@types/react-intl": "^2.3.17",
    "@types/react-modal": "^3.8.1",
    "@types/react-test-renderer": "^16.8.1",
    "@types/storybook__addon-actions": "^3.4.2",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-knobs": "^4.0.4",
    "@types/storybook__react": "^4.0.1",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.0.5",
    "babel-polyfill": "^6.26.0",
    "cssom": "^0.3.4",
    "hyperform": "^0.9.23",
    "jest-dom": "^3.1.3",
    "jest-fetch-mock": "^2.1.1",
    "jest-localstorage-mock": "^2.4.0",
    "prettier": "^1.16.4",
    "react-docgen-typescript-loader": "^3.0.1",
    "react-testing-library": "^6.0.3",
    "storybook-addon-intl": "^2.4.1",
    "stylelint": "^9.10.1",
    "stylelint-order": "^2.1.0",
    "tslint": "^5.14.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^4.0.0",
    "tslint-react-hooks": "^2.0.0",
    "typescript": "^3.4.1",
    "xhr-mock": "^2.4.1"
  },

My temporary fix:
global.CSS = { supports: jest.fn() };

[wojtekmaj]

Can you check your package-lock.json/yarn.lock to see if the newest React-Fit is installed?

So CSS is defined, but CSS.supports isn't?

Possibly related to jsdom/jsdom#2026

[PhilMcVay]

Hi,

I'm currently having the same issue as @Shermayster. Also using, react-date-picker and react-testing-library.

I have tried adding global.CSS = { supports: jest.fn() }; in the test file and can confirm the latest version of React-Fit is installed but the issue is still not resolved.