Enzyme: Calling `.html()` on a shallow render crashes PhantomJS

[CodyReichert]

I'm upgrading my codebase _from_ [email protected] to 3.1.1 and all of my tests that call the .html() method on a shallow render are causing PhantomJS to crash. The test cases are pretty simple, like this:

const props = {}
const wrapper = shallow(<Component {...props}/>)

describe('...', () => {
  it('should not crash', () => {
    expect(wrapper.html()).toContain('text')
  })
})

And that's pretty much it. I have maybe 50 tests that do his (the other 1,000 tests work fine), and it looks like each of them have the same issue (if I isolate karma to just these tests, they're the only ones that fail). I also tried [email protected] and above, and enzyme-adapter-react-16 earlier versions.

These are my other dependencies:

• "phantomjs-prebuilt": "2.1.16",
• "karma": "1.7.1",
• "karma-webpack": "2.0.6",
• "enzyme": "3.1.1",
• "enzyme-adapter-react-16": "1.0.4",
• "react": "16.1.0", "react-dom": "16.1.0"

This is what the PhantomJS stack trace looks like (I don't know how to get a more detailed log - does anyone have any tips?):

12 11 2017 19:47:28.483:ERROR [phantomjs.launcher]:
1   0x1b67967 /home/cody/workspace/projects/frontend/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs() [0x1b67967]
2   0x1baac35 /home/cody/workspace/projects/frontend/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs() [0x1baac35]
3   0x1b9369c /home/cody/workspace/projects/frontend/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs() [0x1b9369c]
4   0x18970ad /home/cody/workspace/projects/frontend/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs() [0x18970ad]
5   0x1896ace /home/cody/workspace/projects/frontend/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs() [0x1896ace]
6   0x1896ddf /home/cody/workspace/projects/frontend/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs() [0x1896ddf]
7   0x1907ec8 /home/cody/workspace/projects/frontend/node_modules/phantomjs-prebuilt/lib/phantom/bin/phantomjs() [0x1907ec8]
8   0x7f379e32381a [0x7f379e32381a]
PhantomJS has crashed. Please read the bug reporting guide at
<http://phantomjs.org/bug-reporting.html> and file a bug report.

---

Any ideas? Happy to provide more info!

[CodyReichert]

FWIW - it also crashes if I use Chrome to run the tests. I can't even get Chrome to show a stack trace; it just hangs and Karma restarts.

[ljharb]

What version of cheerio are you using?

Also, it seems like you upgraded to enzyme 3 and react 16 at the same time - this makes breakage more likely and debugging nearly impossible. Can you roll back to react 15, and get that passing on enzyme 3 first? That will narrow down if it's enzyme 3, or react 16 that's breaking for you.

[CodyReichert]

Good idea, thanks for the tip! You are correct that I upgraded enzyme and react at the same time in my initial issue.

Now, I only upgraded enzyme to 3.1.1 and installed enzyme-adapter-react-15@latest on my existing code which is React 15.6.1. This seems to be working, although there were a few errors I had to fix up.

It could definitely be that one of those errors I fixed was causing the issue I was hitting, so let me get this committed, and I'll try to upgrade React next and see what happens.

Thanks again - I'll keep you posted!

[CodyReichert]

Interestingly enough, I hit the same issue when upgrading to React 16. To sum up it up:

• My tests worked on [email protected] and [email protected].
• I upgraded to [email protected] and the tests still work (after fixing a couple of issues).
• After upgrading to [email protected], I get the crash mentioned above.

This is the _only_ change to my project to upgrade React, and it breaks the enzyme tests:

modified   frontend/package.json
@@ -36,6 +36,7 @@
+    "immutability-helper": "2.5.0",
     ...
-    "react": "15.6.2",
+    "react": "16.1.0",
     ...
-    "react-dom": "15.6.2",
+    "react-dom": "16.1.0",
     ...
-    "react-router": "3.0.5",
+    "react-router": "3.2.0",
     ...
     "enzyme": "3.1.1",
-    "enzyme-adapter-react-15": "1.0.5",
+    "enzyme-adapter-react-16": "1.0.4",
     ...
-    "react-addons-test-utils": "15.5.1",
-    "react-test-renderer": "15.6.2",
+    "react-test-renderer": "16.1.0",

modified   frontend/test/index.js
@@ -3,7 +3,7 @@
  */

 const enzyme = require('enzyme')
-const Adapter = require('enzyme-adapter-react-15')
+const Adapter = require('enzyme-adapter-react-16')

 enzyme.configure({ adapter: new Adapter () })

Cheerio - you mentioned it in the first comment, but I'm just using the Cheerio that comes with enzyme (v1 rc2). I did, for posterity, install 0.22.0 and I get the same crash (may be a clue, I didn't get a different error).

I realize this is difficult without a stack trace or some sort of error, but all I can get is a crash, so, I'm still trying to get more details.

If there's any other info I can provide just let me know! And if you have any ideas for a rabbit hole I can jump that would be great - it's honestly really weird.

[ljharb]

It'd be useful if you could narrow down your tests to see which test files are causing the crash; presumably it's not all of them.

After that, we can probably narrow it down to which of your components is causing it, and then that's probably a React 16-related issue.

[CodyReichert]

Alright, @ljharb, I think enzyme is not the culprit here :smile: I traced it down to calling .html() on a single component that uses the react-modal library.

I'm still not sure what the issue is, but it seems related to https://github.com/reactjs/react-modal/issues/538. He doesn't give any information, but enzyme is probably calling renderToStaticMarkup during .html() at some point, right? Sounded related. For now I'm just not using .html() for a couple tests.

Thanks for the help (and enzyme).