search

enzymejs / enzyme

JavaScript Testing utilities for React
https://enzymejs.github.io/enzyme/
MIT License
19.96k stars 2.01k forks source link

Mount and simulate are failing after changing to Node 16 #2599

Closed miniminivan closed 1 year ago

miniminivan commented 1 year ago

Thanks for reporting an issue to us! We're glad you are using and invested in Enzyme. Before submitting, please read over our commonly reported issues to prevent duplicates!

All common issues

Notoriously common issues

If you haven't found any duplicated issues, please report it with your environment!

Current behavior

After updating to node 16 we have been experiencing some issues with tests relating to mount and simulating blurs. This is the error that comes up with mount:

TypeError: performance.mark is not a function This is the error when we simulate blurs: Uncaught TypeError: The "url" argument must be of type string. Received undefined

I am wondering if there are any issues with incompatibilities in versions since these tests used to pass with node 14. And these errors seem to be coming up as an internal issue.

Expected behavior

I want these errors to go away.

Your environment

node v16.20.0 npm 8.19.4

API

Version

library version
enzyme "3.11.0"
react "16.14.0"
react-dom "16.14.0"
react-test-renderer "16.14.0"
adapter (below)

Adapter

ljharb commented 1 year ago

Can you share some of the code that's failing? Nothing in enzyme uses the performance API.

miniminivan commented 1 year ago

Here is a snippet, I can only share a limited amount of code. But we do this set up in each of our test files.

    const setupComponent = (InputProps) => {

        const props = Object.assign({}, InputProps);
        const component = mount(<Header {...props} />);
        return component;
    };

    beforeEach(() => {
        header = setupComponent(defaultProps);
    });

here is the stack trace:

  2) TestFileName
       "before each" hook for "should render":
     TypeError: performance.mark is not a function
      at beginMark (node_modules\react-dom\cjs\react-dom.development.js:10238:15)
      at startWorkLoopTimer (node_modules\react-dom\cjs\react-dom.development.js:10493:5)
      at performSyncWorkOnRoot (node_modules\react-dom\cjs\react-dom.development.js:21752:5)
      at scheduleUpdateOnFiber (node_modules\react-dom\cjs\react-dom.development.js:21188:7)
      at updateContainer (node_modules\react-dom\cjs\react-dom.development.js:24373:3)
      at C:\...\node_modules\react-dom\cjs\react-dom.development.js:24758:7
      at unbatchedUpdates (node_modules\react-dom\cjs\react-dom.development.js:21903:12)
      at legacyRenderSubtreeIntoContainer (node_modules\react-dom\cjs\react-dom.development.js:24757:5)
      at Object.render (node_modules\react-dom\cjs\react-dom.development.js:24840:10)
      at fn (node_modules\enzyme-adapter-react-16\src\ReactSixteenAdapter.js:488:26)
      at C:\...\node_modules\enzyme-adapter-react-16\src\ReactSixteenAdapter.js:405:37
      at batchedUpdates$1 (node_modules\react-dom\cjs\react-dom.development.js:21856:12)
      at Object.act (node_modules\react-dom\cjs\react-dom-test-utils.development.js:929:14)
      at wrapAct (node_modules\enzyme-adapter-react-16\src\ReactSixteenAdapter.js:405:13)
      at Object.render (node_modules\enzyme-adapter-react-16\src\ReactSixteenAdapter.js:474:16)
      at new ReactWrapper (node_modules\enzyme\src\ReactWrapper.js:115:16)
      at mount (node_modules\enzyme\src\mount.js:10:10)
      at setupComponent (test\Components\Header\/file-test.js:50:27)
      at Context.<anonymous> (test\Components\Header\/file-test.js:75:22)
      at processImmediate (node:internal/timers:466:21)
ljharb commented 1 year ago

node 16 does have performance.mark - what version of jsdom are you using, by chance?

miniminivan commented 1 year ago

looks like "15.2.1"

Also here is the error for simulate and the trace stack and code snippet:

    describe('should call onTest', () => {
        it('should update Test name', () => {
            const updateActionSpy = sinon.spy(TestFile, 'ChangeComponentName');

            const input = componentEditVersion.find('input[className="name-input-box"]');
            input.simulate('blur', { target: { value: 'Test Name' } });

            expect(updateActionSpy.called).to.true;

            TestActions.ChangeComponentName.restore();
        });
    });
4) Test
       should call onTest
         should update Test Name:
     Uncaught TypeError: The "url" argument must be of type string. Received undefined
      at new NodeError (node:internal/errors:387:5)
      at validateString (node:internal/validators:162:11)
      at Url.parse (node:url:168:3)
      at urlParse (node:url:155:13)
      at new Request (node_modules\node-fetch\lib\request.js:27:16)
      at C:\...\node_modules\node-fetch\index.js:51:17
      at new Promise (<anonymous>)
      at new Fetch (node_modules\node-fetch\index.js:49:9)
      at Fetch (node_modules\node-fetch\index.js:37:10)
      at fetch (node_modules\isomorphic-fetch\fetch-npm-node.js:8:19)
      at _callee2$ (src\Services\/fetch.js:54:28)
      at tryCatch (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:54:17)
      at Generator.<anonymous> (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:136:22)
      at Generator.next (node_modules\@babel\runtime-corejs3\helpers\regeneratorRuntime.js:80:21)
      at asyncGeneratorStep (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:4:24)
      at _next (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:23:9)
      at C:\...\node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:28:7
      at new Promise (<anonymous>)
      at new Wrapper (node_modules\core-js-pure\internals\export.js:18:24)
      at Object.apply (node_modules\@babel\runtime-corejs3\helpers\asyncToGenerator.js:20:12)
      at Object.post (src\Services\/fetch.js:40:11)
      at TestActionsClass.changeComponentName (src\Actions\/TestActions.js:104:22)
      at TestActionsClass._callee3$ (src\Actions\/TestActions.js:82:47)
      at ShallowWrapper.single (node_modules\enzyme\src\ShallowWrapper.js:1654:21)
      at ShallowWrapper.simulate (node_modules\enzyme\src\ShallowWrapper.js:1133:17)
      at Context.<anonymous> (test\Components\testfile\/test.js:102:19)
      at processImmediate (node:internal/timers:466:21)
miniminivan commented 1 year ago 
{
  "name": "test-ui",
  "version": "0.8.0",
  "description": "Valkyrie",
  "main": "dist/index.js",
  "dependencies": {
    "@babel/runtime": "^7.8.4",
    "classnames": "^2.2.6",
    "core-js": "^3.6.4",
    "dotenv-webpack": "^8.0.0",
    "es6-promise": "^4.2.8",
    "flux": "3.1.3",
    "history": "^4.9.0",
    "immutability-helper": "^3.0.1",
    "intl": "^1.2.5",
    "isomorphic-fetch": "^2.2.1",
    "match-all": "^1.2.6",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "solutions-eventbus-library": "^1.0.5",
    "superagent": "^5.0.5",
    "underscore": "^1.9.1",
    "url-loader": "^1.1.2"
  },
  "scripts": {
    "test": "node node_modules/mocha/bin/mocha --require @babel/register --require ignore-styles --require test-setup.js --reporter min \"./test/**/*-test.js\"",
    "integration-tests": "jest --env=jsdom --config ./integration-test-setup.js",
    "coverage": "cross-env NODE_ENV=test node ./node_modules/nyc/bin/nyc.js npm test report --reporter=lcov --reporter=html",
    "build": "npm run lint && npm run builddev",
    "builddev": "node node_modules/webpack/bin/webpack -d --env.box=dev",
    "buildci": "node node_modules/webpack/bin/webpack -p --env.box=ci",
    "buildg1": "node node_modules/webpack/bin/webpack -p --env.box=g1",
    "buildg2": "node node_modules/webpack/bin/webpack -p --env.box=g2",
    "buildg3": "node node_modules/webpack/bin/webpack -p --env.box=g3",
    "buildg4": "node node_modules/webpack/bin/webpack -p --env.box=g4",
    "buildperf": "node node_modules/webpack/bin/webpack -p --env.box=perf",
    "buildprod": "node node_modules/webpack/bin/webpack -p --env.box=prod",
    "lint": "eslint .",
    "watch": "webpack --watch",
    "fix": "eslint . --fix",
    "clean": ""
  },
  "author": {
    "name": "Pivotal Lab"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
    "@babel/plugin-transform-async-to-generator": "^7.8.3",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/plugin-transform-runtime": "^7.8.3",
    "@babel/plugin-transform-template-literals": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.4.4",
    "@babel/runtime-corejs3": "^7.8.4",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-istanbul": "^5.1.4",
    "babel-plugin-rewire": "^1.2.0",
    "babel-plugin-webpack-alias": "^2.1.2",
    "chai": "^4.2.0",
    "cheerio": "1.0.0-rc.10",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.1",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.12.1",
    "eslint": "^5.16.0",
    "eslint-plugin-react": "^7.13.0",
    "file-loader": "^3.0.1",
    "global-jsdom": "^8.1.0",
    "html-webpack-plugin": "^3.2.0",
    "ignore-styles": "^5.0.1",
    "jest": "^27.0.6",
    "jsdom": "^15.2.1",
    "keymirror": "^0.1.1",
    "mocha": "^6.1.4",
    "nyc": "^14.1.0",
    "react-test-renderer": "^16.8.6",
    "rosie": "^2.0.1",
    "sinon": "^7.3.2",
    "style-loader": "^0.23.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-merge": "^4.2.2"
  },
  "publishConfig": {
    "registry": "https:/.../api/npm/npm-local/"
  }
}

here is the package.json if needed too, it is probably an incompatibility with a package, but not sure which one

miniminivan commented 1 year ago

@ljharb any updates? it is stopping our development flow since out pipelines will not pass.

ljharb commented 1 year ago

I'm traveling atm so it's hard to find time; I'll get to it as soon as i can.

ljharb commented 1 year ago

I wonder if it's an issue in isomorphic-fetch; you may want to try undici's fetch instead.

miniminivan commented 1 year ago

we decided to update to react 17 instead and that fixed a lot of our issues will close this issue now.

ljharb commented 1 year ago

Glad to hear it’s fixed, but enzyme does not yet support react 17.