cheerio incompatible version: TypeError: Cannot read property 'htmlparser2' of undefined

[0xdevalias]

Current behavior

TypeError: Cannot read property 'htmlparser2' of undefined
--
  |  
  | 151 \|
  | 152 \|   const expectedHtml = '<h3>This is a comment</h3>'
  | > 153 \|   expect(renderedMarkdown.render().html()).toBe(expectedHtml)
  | \|                           ^
  | 154 \| })
  | 155 \|
  | 156 \| /* -------------------------------------------------------------------------- */
  |  
  | at parseWithParse5 (node_modules/cheerio/lib/parse.js:26:64)
  | at Function.Object.<anonymous>.exports.evaluate (node_modules/cheerio/lib/parse.js:42:68)
  | at Object.<anonymous>.module.exports (node_modules/cheerio/lib/parse.js:11:21)
  | at Function.Object.<anonymous>.exports.load (node_modules/cheerio/lib/static.js:27:14)
  | at ReactWrapper.load [as render] (node_modules/enzyme/src/ReactWrapper.js:653:48)
  | at Object.render (comment-form/components/CommentFormTest.js:153:27)

Cheerio introduced breaking changes:

• Cannot read property 'htmlparser2' of undefined (v1.0.0) cheeriojs/cheerio#1260
• Please do not tag release candidate as latest cheeriojs/cheerio#1261

Essentially, they're moving away from htmlparser2 by default, but there is a way to continue it's use.

Expected behavior

Using .render() to work as expected/documented.

Looking at the package.json I can't even see where cheerio is being included from, but a hacky fix would be to pin to an older version before the breaking changes were introduced.

• https://github.com/airbnb/enzyme/blob/51273315f27968baac65eeb71c579527d4fc7be9/package.json

To fix it properly, we can see the usages here:

https://github.com/airbnb/enzyme/blob/master/packages/enzyme/src/ReactWrapper.js#L644-L654

  render() {
    const html = this.html();
    return loadCheerioRoot(html);
  }

https://github.com/airbnb/enzyme/blob/master/packages/enzyme/src/Utils.js#L356-L367

export function loadCheerioRoot(html) {
  if (!html) {
    return cheerio.root();
  }

  if (!isHtml(html)) {
    // use isDocument=false to create fragment
    return cheerio.load(html, null, false).root();
  }

  return cheerio.load('')(html);
}

This comment appears to provide the new way to continue using htmlparser2:

• Please do not tag release candidate as latest cheeriojs/cheerio#1261 (comment)

const dom = htmlparser2.parseDOM(file.contents, options)
const $ = cheerio.load(dom)

Workaround

Coerce the dependency version resolution in your package.json:

• https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

"resolutions": {
    "cheerio": ">= 0.22.0 < 1.0.0",
}

Related

• https://stackoverflow.com/questions/47437388/jest-enzyme-typeerror-cannot-read-property-htmlparser2-of-undefined/

Your environment

API

• shallow
• mount
• render

Version

library	version
enzyme	3.10.0
react	16.8.6
react-dom	16.8.6
react-test-renderer	16.8.6
adapter (below)	1.14.0

enzyme@^3.9.0:
  version "3.10.0"
  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.10.0.tgz#7218e347c4a7746e133f8e964aada4a3523452f6"
  integrity sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==
  dependencies:
    cheerio "^1.0.0-rc.2"
..snip..

Adapter

• enzyme-adapter-react-16

[ljharb]

I’m a bit confused. In which version were these breaking changes made?

[0xdevalias]

As per cheeriojs/cheerio#1260 anything greater than 0.22.0, so 1.x. Which was being pulled in by enzyme automagically.

My hackfix in our package.json was to set this:

"resolutions": {
    "cheerio": ">= 0.22.0 < 1.0.0",
}

As per https://yarnpkg.com/lang/en/docs/selective-version-resolutions/

[ljharb]

enzyme 3 has always required cheerio v1 and won't work with any version prior (if npm ls exits nonzero, yo0ur dep graph is invalid and you can't rely on anything working).

Have you ever avoided this error with enzyme 3 in the past?