cheerio incompatible version: TypeError: Cannot read property 'htmlparser2' of undefined
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
# Current behavior
```
TypeError: Cannot read property 'htmlparser2' of undefined
--
|
| 151 \|
| 152 \| const expectedHtml = '
This is a comment
'| > 153 \| expect(renderedMarkdown.render().html()).toBe(expectedHtml)
| \| ^
| 154 \| })
| 155 \|
| 156 \| /* -------------------------------------------------------------------------- */
|
| at parseWithParse5 (node_modules/cheerio/lib/parse.js:26:64)
| at Function.Object..exports.evaluate (node_modules/cheerio/lib/parse.js:42:68)
| at Object..module.exports (node_modules/cheerio/lib/parse.js:11:21)
| at Function.Object..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:
- https://github.com/cheeriojs/cheerio/issues/1260
- https://github.com/cheeriojs/cheerio/issues/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
```js
render() {
const html = this.html();
return loadCheerioRoot(html);
}
```
https://github.com/airbnb/enzyme/blob/master/packages/enzyme/src/Utils.js#L356-L367
```js
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`:
- https://github.com/cheeriojs/cheerio/issues/1261#issuecomment-450125112
```js
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/
```json
"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
- [x] 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
- [x] enzyme-adapter-react-16
Contributor guide
Research direction
Start with comment-form/components/CommentFormTest.js around the failing render() call, then read packages/enzyme/src/ReactWrapper.js and packages/enzyme/src/Utils.js, especially loadCheerioRoot. Reproduce the failure with the render test and verify that .render() works with the documented Enzyme and Cheerio dependency versions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- testing
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 50/100