Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Latest deployment(1.0.0) broken ESM import in Jest/Enzyme #4014

Open
CodeMedic42 opened this issue Aug 13, 2024 · 5 comments
Open

Latest deployment(1.0.0) broken ESM import in Jest/Enzyme #4014

CodeMedic42 opened this issue Aug 13, 2024 · 5 comments

Comments

@CodeMedic42
Copy link

I have a library which I just converted over to ESM(forced to because of another dependency). It took a LONG time to get it all working(stupid ecosystem change). But since the latest update to cheerio my Jest tests are failing. I am not sure what changed in cheerio as I do not use it directly. I use enzyme which has a dependency on cheerio. All this will make giving a working example VERY difficult. I can give you the error I am getting and I can try and give you the particulars of my set up. If there is anything else I can give you please let me know.

Here is the error

Must use import to load ES Module: /Users/me/source/.../my-project/node_modules/.pnpm/[email protected]/node_modules/cheerio/dist/browser/index.js

Here is roughly my setup

packge.json

{
    ...
    "scripts": {
        "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
    },
    "devDependencies": {
        "@jest/globals": "^29.7.0",
        "enzyme": "3.11.0",
        "enzyme-adapter-react-16": "1.15.7",
        "jest": "^29.7.0",
        "jest-environment-jsdom": "29.7.0",
        "ts-jest": "^29.1.5",
        "typescript": "^5.4.5",
    }
}

jest.config.mjs

import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  passWithNoTests: true,
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  extensionsToTreatAsEsm: ['.ts', '.tsx'],
  transform: {
    '^.+\\.m?[tj]sx?$': [
      'ts-jest',
      {
        useESM: true,
      },
    ],
  },
  setupFilesAfterEnv: [
    path.join(__dirname, 'setup.mjs')
  ],
  moduleNameMapper: {
    '^uuid$': '<rootDir>/node_modules/uuid/wrapper.mjs'
  }
};

setup.mjs

import { jest } from '@jest/globals';

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

const enzymeMountPoint = window.document.createElement('div');
enzymeMountPoint.setAttribute('id', 'enzyme-mount-point');
document.body.appendChild(enzymeMountPoint);

let wrapper = null;

// eslint-disable-next-line no-undef
global.beforeEach(() => {
    console.log = jest.fn();
    console.warn = jest.fn();
});

// eslint-disable-next-line no-undef
global.afterEach(() => {
    if (wrapper === null || wrapper === undefined) {
        return;
    }

    wrapper.detach();

    wrapper = null;
});

function mountTo(component) {
    wrapper = Enzyme.mount(component, { attachTo: enzymeMountPoint })

    return wrapper;
}

global.mountTo = mountTo;

tsconfig.json

{
    "compilerOptions": {
        "target": "es2020",
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ES2020",
        "moduleResolution": "Bundler",
        "jsx": "react-jsx",
        "baseUrl": "./src",
        "noEmit": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "strict": true,
        "skipLibCheck": true,
        "checkJs": false,
        "allowJs": true
    },
    "include": ["**/*", "*"],
}
@carystanley
Copy link

I have been experiencing a similar issue with the latest release of cheerio:

enzymejs/enzyme#2609

Enzyme was first implemented against cheerio @ 1.0.0-rc.3 which was published 5 years ago

But cheerio must have changed how things were exported right before the 1.0.0 release

@Alevale
Copy link

Alevale commented Aug 13, 2024

Related to what we are all experiencing in my group since the version 1.0.0 was released.

Seems like this has really taken all the depending packages by surprise, breaking things, yet no answer by the library maintainers (have a look at what we're suggesting in #3993 )

@CodeMedic42
Copy link
Author

At the moment I have resolved this by forcing our package manager(pnpm) to use a specific version of cheerio.

In the root package.json we have this.

{
    "pnpm": {
        "overrides": {
            "cheerio": "1.0.0-rc.12"
        },
}

My problem went away.

This obviously has a negative side effect for forcing ANYTHING using cheerio to use this version, so use carefully. Also it will always use this version until you remove it. Be sure to reevaluate this issue periodically to see if it has been resolved and you can remove this constraint. All very obvious statements but I like to be through.

@Alevale
Copy link

Alevale commented Aug 14, 2024

This is a good temporary workaround. I don't think it's a good practice to ask for all the community (those 8 Million downloads) to implement this in their package.json till they can migrate their codebase to whatever cheerio wants with their new version.

If the maintainers of cheerio think it is ok, because they had the RC flag on in their package for 7 years they are missing the bigger picture.

@nagendra-ks
Copy link

nagendra-ks commented Aug 22, 2024

Hi, is this issue fixed ?? is the below error because of broken import in Jest/Enzyme ??

Currently I'm getting below error when i try to run "npm run test"
image

enzyme import failure

Test suite failed to run

ENOENT: no such file or directory, open 'node:stream'

  3 | import "raf/polyfill";
  4 |
> 5 | import Enzyme from 'enzyme';
    | ^

i tried installing the package multiple times but no use. Can anyone reply ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

4 participants