maslianok / react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React
http://maslianok.github.io/react-resize-detector/
MIT License
1.25k stars 91 forks source link

TypeError: window.ResizeObserver is not a constructor #217

Closed JESii closed 2 years ago

JESii commented 2 years ago

I am getting this error on roughly 35% of my tests -- just as was described in issue #145 package.json

{
  "name": "winter-web-app",
  "version": "0.1.1",
  "private": true,
  "dependencies": {
    "@ant-design/colors": "^5.0.1",
    "@ant-design/icons": "^4.5.0",
    "@apollo/client": "^3.3.7",
    "@azure/msal-browser": "^2.24.0",
    "@azure/msal-common": "6.3.0",
    "@azure/msal-react": "^1.4.0",
    "@craco/craco": "^6.0.0",
    "@emotion/core": "^11.0.0",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^11.1.5",
    "@storybook/addon-knobs": "^6.2.1",
    "@testing-library/testcafe": "^4.4.0",
    "antd": "^4.10.3",
    "axios": "^0.21.1",
    "chalk": "4.1.0",
    "chromatic": "^5.6.3",
    "craco-antd": "^1.19.0",
    "craco-less": "^1.17.1",
    "faker": "^5.4.0",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.12.6",
    "history": "^5.0.0",
    "insert-css": "^2.0.0",
    "jsdoc": "^3.6.6",
    "loglevel": "^1.8.0",
    "oidc-client": "^1.11.3",
    "prop-types": "^15.7.2",
    "ramda": "^0.27.1",
    "ramda-adjunct": "^3.0.0",
    "react": "^17.0.2",
    "react-context-devtool": "^2.0.3",
    "react-devtools": "^4.24.7",
    "react-document-title": "^2.0.3",
    "react-dom": "^17.0.1",
    "react-oidc": "^1.0.3",
    "react-outside-click-handler": "^1.3.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-super-responsive-table": "^5.2.0",
    "recharts": "^2.0.9",
    "testcafe-react-selectors": "^4.1.5"
  },
  "scripts": {
    "start": " craco start",
    "start:https": "HTTPS=true  craco start",
    "build": "node generate_buildno.js && craco build",
    "test": "react-scripts test --coverage --watchAll=false",
    "test:cov": "react-scripts test --coverage --coverageReporters=\\\"text\\\" --coverageReporters=\\\"text-summary\\\" --watchAll=false",
    "test:testcafe": "testcafe chrome -s takeOnFails=true src/tests/pages/",
    "test:all": "yarn test; yarn lint; yarn test:testcafe # Run the whole 9 yards!",
    "test:all:base": "yarn test; yarn lint; yarn test:tc:base # Run tests required for prerelease testing",
    "test:list": "cat package.json | grep '\"test'",
    "test:tc": "testcafe chrome -s takeOnFails=true src/tests/pages/ # Run sames tests as for test:tc:all",
    "test:tc:all": "testcafe chrome -s takeOnFails=true src/tests/pages/ # Run all testcafe tests",
    "test:tc:one": "testcafe chrome -s takeOnFails=true # Run a single test, entered as the last parameter",
    "test:tc:base": "testcafe chrome -s takeOnFails=true src/tests/pages/coverPage.js src/tests/pages/portfolioPage.js src/tests/pages/assetClassPages.js # Run sames tests as in CI/CD pipeline",
    "test:tc:docker": "docker-compose up --force-recreate --build # Run tests against portfolio-prerelease in docker container",
    "test:tc:headless": "testcafe chromium:headless -s takeOnFails=true src/tests/pages/coverPage.js --reporter spec,xunit:report.xml",
    "test:tc:ci": "testcafe chromium:headless src/tests/pages/coverPage.js -s path=results/screenshots,takeOnFails=true -S --reporter nunit3:report.xml",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "test:one": "react-scripts test --coverage=true",
    "lint": "eslint --ignore-path .gitignore ./src",
    "lint:fix": "eslint --ignore-path .gitignore --fix ./src",
    "format": "prettier --ignore-path .gitignore \"**/*.+(js|json)\"",
    "format:fix": "prettier --ignore-path .gitignore --write \"**/*.+(js|json)\"",
    "jsdoc": "jsdoc src -r",
    "docs": "open out/index.html"
  },
  "jest": {
    "resetMocks": false,
    "collectCoverageFrom": [
      "**/*.js",
      "!**/*.test.js",
      "!**/*.testData.js",
      "!**/*.stories.js",
      "!**/node_modules/**",
      "!**/vendor/**",
      "!**/src/tests/**"
    ],
    "coverageReporters": [
      "text-summary"
    ]
  },
  "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"
    ]
  },
  "resolutions": {
    "babel-loader": "8.1.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.2.1",
    "@storybook/addon-contexts": "^5.3.21",
    "@storybook/addon-docs": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.1",
    "@storybook/addon-links": "^6.2.1",
    "@storybook/addon-storysource": "^6.2.1",
    "@storybook/node-logger": "^6.2.1",
    "@storybook/preset-create-react-app": "^3.1.7",
    "@storybook/react": "^6.2.1",
    "@testing-library/jest-dom": "5.11",
    "@testing-library/react": "11.2.6",
    "@testing-library/user-event": "13.0",
    "babel-eslint": "^10.1.0",
    "canvas": "^2.8.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-graphql": "^4.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-ramda": "^2.5.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^1.7.0",
    "eslint-plugin-testcafe": "^0.2.1",
    "eslint-plugin-testing-library": "^3.10.1",
    "jest-localstorage-mock": "^2.4.14",
    "prettier": "^2.2.1",
    "storybook-addon-designs": "^5.4.5",
    "stylelint": "^13.9.0",
    "testcafe": "^1.18.4",
    "testcafe-reporter-nunit3": "^3.0.0",
    "testcafe-reporter-xunit": "*",
    "validator": "^13.7.0",
    "wait-for-expect": "^3.0.2"
  }
}

I did the usual rm -rf node_modules, clear cache, yarn install multiple times to no effect. At one time I was getting a huge package.json diff with almost every @babel module being updated. I finally resolved the issue -- on my local machine --by going back to the previous commit, doing yarn install there, and then switching to the problem PR without doing a yarn install... makes no sense but now it seems to be working.

However, it's still failing in the CI/CD pipeline -- about 180 tests -- so still an issue. Upon inspection, many but not all of them are associated with displaying graphs

Semigradsky commented 2 years ago

@JESii did you mock ResizeObserver as was described in that ticket?

JESii commented 2 years ago

Working on it...

JESii commented 2 years ago

@Semigradsky Yes, it did -- thanks! Closing this issue.