High Jest Heap Memory Usage in JavaScript React Projects

Question

I logged the heap usage while testing with jest, because our jest tests (60+ test cases and 250 tests) are causing a 137 out of memory exception in our ci.

The administration is asking me about jest memory leaks, because the node processes are using arround 5GB RAM while running on the machine.

I was looking into the heap usage of jest, and how to debug that, so I found these Heap Snapshots, that you can take with Chrome Inspektor when you run:

node --inspect-brk --expose-gc ./node_modules/react-scripts/node_modules/.bin/jest --runInBand --logHeapUsage

... or for create-react-app

yarn react-scripts --inspect-brk test --runInBand --logHeapUsage

The outcome of this Heap Usage is very confusing for me, but i found some stuff that I know, for example React-Dom and Lodash.

Is it normal for Lodash and React-Dom etc. to be loaded into that Heap Snapshot multiple times? Or are we implementing major mistakes in our code, that causes these multiloads of lodash, react-dom, etc.

First i was thinking of different library versions, but since the Retained Size is exactly equal in all the lines of the same library, i kind of doubt it.

Questions are:

• Is it normal for jest to use 5GB RAM by these amounts of tests?
• Is this multiload of react-dom and lodash and the other libraries normal?
• Can i look into something else to find the leaks?

Thanks!

Answer 1

1. I think it depends on what it is you are testing. If the process you are testing with jest requires 5Gb or RAM then I could see it happening. It is probable that it is the process that you are testing causing the memory usage.

2. From my experience, no, Lodash and react-dom are smallish libraries that do not require a lot of RAM (react-dom especially). Lodash's RAM usage depends on its task once more, if you are using it to alter or compute large arrays then the RAM usage will go up.

3. Yes, having wasted roughly 1 month looking for a memory leak in my Electron application, I found it with React-devTools. It seemed like the devtools would keep track (in-memory logs) of all the updates taking place in react under the hood and add to the total ram location of the app. It could be possible that jest is loading up react-devTools somehow? Seems a bit odd to me but anything is possible.

If both lodash and react-dom are using RAM together, it sounds like it might be a high amount of rerenders/ routing taking place, especially if you are using lodash to compute strings or arrays based off of the routes. If you are not using class react components (thus using functional components) I would recommend switching and using componentDidMount() and componentWillUnmount() to reduce the probability of memory leaks. You can check out the documentation here.