enzymejs / enzymejs/enzyme

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

Open
#2,299 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.