DEV Community

Jen C.
Jen C.

Posted on

JavaScript package manager - How to fix Cannot find module 'cheerio' error with Enzyme in Yarn 1 projects

#javascript #react #testing #webdev

Resources

Yarn 1

Selective dependency resolutions

Jest

jsdom

Enzyme

Babel

Background

This guide addresses a common error encountered when running Jest tests with Enzyme in projects managed by Yarn 1. The error involves missing the Cheerio module due to version incompatibilities.

When running tests using the command yarn test, the following error is encountered:

Test suite failed to run

    Cannot find module 'cheerio/lib/utils' from 'node_modules/enzyme/build/Utils.js'

    Require stack:
      node_modules/enzyme/build/Utils.js
      node_modules/enzyme/build/ReactWrapper.js
      node_modules/enzyme/build/index.js
      jest/setup.js

      ...
Enter fullscreen mode Exit fullscreen mode

Project setup

package.json

scripts

 "scripts": {
    ...

    "test": "jest",

    ...
Enter fullscreen mode Exit fullscreen mode

Jest configuration

...

"jest": {
    "testEnvironment": "jsdom",
    "setupFiles": [
      "<rootDir>/jest/setupFiles.js"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/jest/setup.js"
    ],

    ...
Enter fullscreen mode Exit fullscreen mode

devDependencies

...

"devDependencies": {
    "@babel/core": "^7.26.10",
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^14.0.0",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
    "babel-jest": "^27.1.0",
    "enzyme": "^3.11.0",
    "jest": "^27.1.0",

    ...
Enter fullscreen mode Exit fullscreen mode

Babel configuration 

module.exports = function (api) {
  api.cache(true);

  return {
    presets: ['next/babel'],
  };
};
Enter fullscreen mode Exit fullscreen mode

Root cause

Enzyme internally depends on Cheerio, but only supports up to 1.0.0-rc.3. If a newer version of Cheerio (such as 1.1.0) is installed, Enzyme will fail to locate expected modules, resulting in the error.

Cheerio 1.0.0 is incompatible with enzyme 3.11.0. #3987

Cheerio Update to 1.0.0 is breaking Enzyme 3.11.0 for Node < 18.17.0 #2606

Cheerio 1.0.0-rc.11 no longer support deep imports #2558

Solution

Based on the links in the previous section, the latest Cheerio version supported by Enzyme is 1.0.0-rc.3. Therefore, add a resolutions field to force Enzyme to use Cheerio version 1.0.0-rc.3:

package.json

...

 "resolutions": {
    "enzyme/cheerio": "1.0.0-rc.3"
  }

 ...
Enter fullscreen mode Exit fullscreen mode

Next, we observe the Cheerio version in the yarn.lock file before and after adding the resolutions.

Before the change, Enzyme’s dependency on cheerio@^1.0.0-rc.3 is resolved to version 1.1.0:

...

cheerio@^1.0.0-rc.3:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.1.0.tgz#87b9bec6dd3696e405ea79da7d2749d8308b0953"
  integrity sha512-+0hMx9eYhJvWbgpKV9hN7jg0JcwydpopZE4hgi+KvQtByZXPp04NiCWU0LzcAbP63abZckIHkTQaXVF52mX3xQ==
  dependencies:
    cheerio-select "^2.1.0"
    dom-serializer "^2.0.0"
    domhandler "^5.0.3"
    domutils "^3.2.2"
    encoding-sniffer "^0.2.0"
    htmlparser2 "^10.0.0"
    parse5 "^7.3.0"
    parse5-htmlparser2-tree-adapter "^7.1.0"
    parse5-parser-stream "^7.1.2"
    undici "^7.10.0"
    whatwg-mimetype "^4.0.0"

...

enzyme@^3.11.0:
  version "3.11.0"
  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
  integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
  dependencies:
    array.prototype.flat "^1.2.3"
    cheerio "^1.0.0-rc.3"

    ...
Enter fullscreen mode Exit fullscreen mode

After the change, Enzyme’s dependency on cheerio@^1.0.0-rc.3 is resolved to version 1.0.0-rc.3:

...

[email protected], cheerio@^1.0.0-rc.3:
  version "1.0.0-rc.3"
  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.3.tgz#094636d425b2e9c0f4eb91a46c05630c9a1a8bf6"
  integrity sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==
  dependencies:
    css-select "~1.2.0"
    dom-serializer "~0.1.1"
    entities "~1.1.1"
    htmlparser2 "^3.9.1"
    lodash "^4.15.0"
    parse5 "^3.0.1"

...

enzyme@^3.11.0:
  version "3.11.0"
  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.11.0.tgz#71d680c580fe9349f6f5ac6c775bc3e6b7a79c28"
  integrity sha512-Dw8/Gs4vRjxY6/6i9wU0V+utmQO9kvh9XLnz3LIudviOnVYDEe2ec+0k+NQoMamn1VrjKgCUOWj5jG/5M5M0Qw==
  dependencies:
    array.prototype.flat "^1.2.3"
    cheerio "^1.0.0-rc.3"

    ...
Enter fullscreen mode Exit fullscreen mode

Should I Add Cheerio to devDependencies in package.json?

No, we do not need to add Cheerio manually to the devDependencies. When we install Enzyme, its direct dependencies, including Cheerio, are installed automatically. we can confirm this by running:

yarn info v1.22.22
warning package.json: No license field
{
  'array.prototype.flat': '^1.2.3',
  cheerio: '^1.0.0-rc.3',
  'enzyme-shallow-equal': '^1.0.1',
  'function.prototype.name': '^1.1.2',
  has: '^1.0.3',
  'html-element-map': '^1.2.0',
  'is-boolean-object': '^1.0.1',
  'is-callable': '^1.1.5',
  'is-number-object': '^1.0.4',
  'is-regex': '^1.0.5',
  'is-string': '^1.0.5',
  'is-subset': '^0.1.1',
  'lodash.escape': '^4.0.1',
  'lodash.isequal': '^4.5.0',
  'object-inspect': '^1.7.0',
  'object-is': '^1.0.2',
  'object.assign': '^4.1.0',
  'object.entries': '^1.1.1',
  'object.values': '^1.1.1',
  raf: '^3.4.1',
  'rst-selector-parser': '^2.2.3',
  'string.prototype.trim': '^1.2.1'
}
Enter fullscreen mode Exit fullscreen mode

Summary

  • Add the resolutions field forcing Cheerio to 1.0.0-rc.3
  • Remove node_modules folder and clear yarn cache
  • Run yarn install to update dependencies
  • Verify with yarn.lock that the correct version of Cheerio is installed
  • Run tests with yarn test again

Top comments (0)