react-modal: Huge memory leak with Jest/Enzyme after upgrading to react-modal 3.X

Summary:

For a while now, I’ve been unable to upgrade to react-modal 3.X in my React 16 project with Jest/Enzyme because when I run tests Node itself actually crashes and I usually have to take some fairly nuclear steps such as force-quitting the process in my activity monitor app in order to use it again. The latest 2.X release of react-modal is totally fine.

Steps to reproduce:

Upgrade react-modal from 2.4.1 to 3.X
Run npm run jest
First few tests may run, but eventually the process hangs, and eventually these errors start to spill out:

<--- Last few GCs --->

[46548:0x102802400]    43615 ms: Mark-sweep 1402.9 (1437.6) -> 1402.9 (1436.6) MB, 1477.5 / 0.0 ms  (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 1477 ms) last resort GC in old space requested
[46548:0x102802400]    45072 ms: Mark-sweep 1402.9 (1436.6) -> 1402.9 (1436.6) MB, 1456.0 / 0.0 ms  last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x38a049725ec1 <JSObject>
    1: read [/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:~2206] [pc=0x181429965313](this=0x38a08a383211 <ReactDOMServerRenderer map = 0x38a00fd8cc29>,bytes=0x38a0125029a9 <Number inf>)
    3: renderToStaticMarkup [/path/to/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2512] [bytecode=0x38a0...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 4: v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 5: v8::internal::Runtime_AllocateInTargetSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/username/.nvm/versions/node/v8.9.0/bin/node]
 6: 0x18142970463d

*Note that I’ve replaced the actual path and username in this snippet.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 9
Comments: 43

Most upvoted comments

I downgrade to 2.4.2 and looks it work now. Will wait until correct fix is merged

asborisov on Mar 10, 2018

@asborisov @rharriso Follow the react issue I’ve mention here. Many ideas/workaround have been publish there.

diasbruno on Mar 9, 2018

@diasbruno I probably can’t ~this~ until after next week. But probably soon after, I’ll get back to you next week though!

rharriso on Feb 24, 2018

No, these tests just make sure the page responds with 200. we inject a request into the Hapi server, and looking at the response code.

rharriso on Feb 23, 2018

Sorry, I should qualify my response a little bit - the tests don’t all pass, but they no longer crash.

ryami333 on Feb 23, 2018

@diasbruno I tried this out on my test suite. And it works!

rharriso on Feb 22, 2018

Try to apply this patch on your project and tell me your results.

diff --git a/react-dom-server.node.development.js b/dd.js
index 2039700..d4832da 100644
--- a/react-dom-server.node.development.js
+++ b/dd.js
@@ -2227,7 +2227,8 @@ var ReactDOMServerRenderer = function () {
         }
         continue;
       }
-      var child = frame.children[frame.childIndex++];
+      frame.childIndex++;
+      var child = frame.children[frame.childIndex];
       {
         setCurrentDebugStack(this.stack);
       }

patch -p1 < patch.diff

node_modules/react-dom/cjs/react-dom-server.node.development.js

diasbruno on Feb 21, 2018

Well…your test has passed. 😃

 PASS  src/App.test.js (347.669s)
  â renders without crashing (342764ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        348.978s, estimated 1404s
Ran all test suites related to changed files.

Watch Usage
 âº Press a to run all tests.
 âº Press p to filter by a filename regex pattern.
 âº Press t to filter by a test name regex pattern.
 âº Press q to quit watch mode.
 âº Press Enter to trigger a test run.

diasbruno on Feb 21, 2018

@diasbruno some more info WRT jsdom.

This issue remained with the latest version 11.6.2. I didn’t see any issues in their backlog that looked related.

rharriso on Feb 20, 2018

Here you go @diasbruno: https://github.com/ryami333/react-modal-memory-exception

This is a ‘Create React App’ web-app, where I’ve done the following:

Installed enzyme, react-modal and enzyme-adapter-react-16.
Added a <Modal> to App.js.
Tried to render the ‘App’ component in App.test.js.

Simply run yarn install && yarn test (or npm install && npm test I suppose) to replicate.

ryami333 on Feb 19, 2018