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

[ryami333]

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:

1. Upgrade react-modal from 2.4.1 to 3.X
2. Run npm run jest
3. 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.

[diasbruno]

Hi @ryami333, can you give more information about this tests?...or is there anything unusual about how are you using react-modal like keep reference of the modal children?

[enapupe]

This seems to be an issue with createPortal.. not sure if enzyme has proper support for it?

[ryami333]

@diasbruno I'm not doing anything like that, no. I'm using enzyme and enzyme-to-json. Most of my tests follow this kind of pattern:

import React from 'react';
import { render } from 'enzyme'; // 3.3.0 (latest)
import toJson from 'enzyme-to-json'; // 3.3.0 (latest)

describe('FooComponent', () => {
    let wrapper;

    it('renders without crashing', () => {
        wrapper = render(
            <FooComponent />,
        );
    });

    it('matches existing snapshot', () => {
        expect(toJson(wrapper)).toMatchSnapshot();
    });
});

Early on, the tests are all appearing to pass, but they just get slower and slower, and eventually the test runner hangs and those node heap errors start spewing.

@enapupe yeah portals seem the most likely candidate don't they?

[diasbruno]

@ryami333 That's a place to look at. Thanks, @enapupe.

[ryami333]

@diasbruno have you had any success replicating this bug? I'm still unable to upgrade at all. Using latest versions of enzyme, enzyme-adapter-react-16, react-test-renderer and of course react-modal.

I've managed to find that it works with Enzyme's 'mount' but not with 'render'.

[diasbruno]

This can be related to the environment the modal is been rendered src/components/Modal.js#L187.

It will just return null if it can not use the DOM.

[ryami333]

But why would returning null result in a big memory exception? Returning null is a perfectly valid render return value.

[diasbruno]

It's possible that the modal is not clean up resources properly. Can you write a small app with test? It would be better to debug.

[ryami333]

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.

[diasbruno]

The modal seems to be rendered. I'll try to see what is going on.

./node_modules/.bin/react-scripts --inspect-brk test --env=jsdom --runInBand

[rharriso]

This could be an issue with jsdom I was seeing a similar bug when running integration tests (no enzyme render). This problem went away when I removed jsdom from the configuration.

[diasbruno]

@rharriso Thanks for the info. I'll try to dig in.

[rharriso]

@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.

[diasbruno]

Some resources to help tracking this issue:

https://github.com/felixge/node-memory-leak-tutorial
jsdom/jsdom#1705