search

enzymejs / enzyme

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

Adapter for React 16 blocks tests from finishing with React 16.14 #2553

Closed pbackx closed 2 years ago

pbackx commented 2 years ago

Current behavior

Running the following Mocha tests hangs:

import './setup.js';
import Adapter from 'enzyme-adapter-react-16';
describe('Just a test', () => {
    it('that should not hang, but it does.', () => {
        console.log('empty test');
   });
});

Output is as expected, but the process hangs at the end and I need to interrupt it:

$ npm test
> mocha-hangs@0.0.1 test
> mocha --require @babel/register
  Just a test
empty test
    ✔ that should not hang, but it does.
  1 passing (5ms)
^C

setup.js is exactly as on this page: https://enzymejs.github.io/enzyme/docs/guides/jsdom.html I have included package.json and babel.config.js at the end.

I'm triggering this behavior simply by importing enzyme-adapter-react-16.

This problem does not occur when running with react and react-dom 16.4.2. It looks like a change in React triggers this problem. But I don't know how to debug this further. Different adapter versions do not seem to solve the problem.

Expected behavior

The Mocha process should finish and return back to the command prompt.

Your environment

Version

library version
enzyme 3.11.0
react 16.14.0
react-dom 16.14.0
react-test-renderer N/A
adapter (below) 1.15.6

Adapter

For reference, here are the other files in my project:

package.json:

{
  "name": "mocha-hangs",
  "version": "0.0.1",
  "scripts": {
    "test": "mocha --require @babel/register"
  },
  "dependencies": {
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.7",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/register": "^7.17.7",
    "chai": "^4.2.0",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.6",
    "jsdom": "^19.0.0",
    "mocha": "^9.2.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "main": "app.js",
  "author": "",
  "license": "ISC",
  "description": ""
}

and babel.config.js:

module.exports = (api) => {
    api.cache(false);
    const presets = [
        "@babel/preset-env"
    ];
    return {presets};
};
ljharb commented 2 years ago

Why are you disabling Babel caching?

pbackx commented 2 years ago

Why are you disabling Babel caching?

Do you think it matters? I wanted to avoid as much interference by other tools.

But yes, same issue even if I enable caching.

ljharb commented 2 years ago

It might have mattered; good to know it doesn't.

nothing about this seems obvious. What's in your mocha config? Or easier, could you put up a repo that reproduces the issue, and i'll see what i can figure out?

pbackx commented 2 years ago

Hi Jordan, yes, it's a strange one.

I already spent quite a bit of time pinpointing the cause of the issue :) Initially I thought there was some setInterval or setTimeout not properly terminated in my own code, but it looks like it is something else.

I have created a small repository that shows the difference between React 16.4.2 and 16.14.0: https://github.com/pbackx/enzyme-2553-test-case

ljharb commented 2 years ago

@pbackx what i also note is that if i comment out the import of your setup file, it doesn't hang. This suggests that it's actually your JSDOM setup that's causing the issue, and the enzyme adapter just happens to be triggering it.

You're using jsdom 19, but I think the latest version of jsdom tested with enzyme is v10.

pbackx commented 2 years ago

Ok, that sounds plausible. I will be on holiday for the next week, but when I'm back I will test it out.

pbackx commented 2 years ago

I was finally able to test some more. Here's what I found:

With React 16.4.2 it doesn't really matter what version of JSDOM I use. 10 works, but 19 is fine too.

With React 16.14.0, the test hangs with any JSDOM >= 12 With JSDOM 11 or below, the test does not run at all with the trace at the end.

I've done a cursory reading of the JSDOM changelog and I don't see anything that immediately catches the eye.

I will close this issue as I'm clearly trying to combine library versions that were not designed to be combined. So the issue is on my end.

If I have time between projects, I will try to figure out the source of the incompatibility, but it looks like it's going to be quite time consuming.

TypeError: Cannot read properties of undefined (reading 'now')
    at /home/backxp/dev/p/mocha_hang/node_modules/scheduler/cjs/scheduler.development.js:111:30
    at Object.<anonymous> (/home/backxp/dev/p/mocha_hang/node_modules/scheduler/cjs/scheduler.development.js:857:5)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Module._compile (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.newLoader [as .js] (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/backxp/dev/p/mocha_hang/node_modules/scheduler/index.js:6:20)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Module._compile (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.newLoader [as .js] (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /home/backxp/dev/p/mocha_hang/node_modules/react-dom/cjs/react-dom.development.js:20:17
    at Object.<anonymous> (/home/backxp/dev/p/mocha_hang/node_modules/react-dom/cjs/react-dom.development.js:25011:5)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Module._compile (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.newLoader [as .js] (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/backxp/dev/p/mocha_hang/node_modules/react-dom/index.js:37:20)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Module._compile (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.newLoader [as .js] (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/backxp/dev/p/mocha_hang/node_modules/enzyme-adapter-react-16/src/ReactSixteenAdapter.js:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Module._compile (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.newLoader [as .js] (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/backxp/dev/p/mocha_hang/node_modules/enzyme-adapter-react-16/src/index.js:2:18)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Module._compile (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.newLoader [as .js] (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/backxp/dev/p/mocha_hang/test/my.test.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Module._compile (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.newLoader [as .js] (/home/backxp/dev/p/mocha_hang/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:337:24)
    at importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at formattedImport (/home/backxp/dev/p/mocha_hang/node_modules/mocha/lib/nodejs/esm-utils.js:7:14)
    at Object.exports.requireOrImport (/home/backxp/dev/p/mocha_hang/node_modules/mocha/lib/nodejs/esm-utils.js:48:32)
    at Object.exports.loadFilesAsync (/home/backxp/dev/p/mocha_hang/node_modules/mocha/lib/nodejs/esm-utils.js:103:20)
    at singleRun (/home/backxp/dev/p/mocha_hang/node_modules/mocha/lib/cli/run-helpers.js:125:3)
    at Object.exports.handler (/home/backxp/dev/p/mocha_hang/node_modules/mocha/lib/cli/run.js:374:5)
ljharb commented 2 years ago

Depending on what in react 16.14 breaks with what in jsdom 12+, it might be possible for enzyme to patch it for you - please do report your findings.

archy-bold commented 1 year ago

If anyone finds this issue as I did, with no solution, it looks like window.Date is not defined at the point enzyme-adapter-react-16 is imported in your setup file. There may also be an error that requestAnimationFrame is also not defined, so put the following at the top of your setup file where you import the React 16 adapter:

window.Date = Date;
window.requestAnimationFrame = () => {
    throw new Error('requestAnimationFrame is not supported in Node');
};
window.cancelAnimationFrame = () => {
    throw new Error('cancelAnimationFrame is not supported in Node');
};