importing react-modal using esmodules syntax from jest does not work, only require syntax works even though I'm using jsdom

[jsoneaday]

I am importing and using react-modal from within my app without issue. However when I run my tests using jest as jsdom testEnvironment it fails to import coming back as undefined. When I switch to commonjs require importing react-modal does come back and works.

I have many other imports all using esmodule syntax that work fine in my tests and only react-modal is coming back as undefined. What can I do?

I run my package.json type as module and this issue happens whether I turn on or off esModuleInterop on typescript. Here's my jest.config.js

export default {
  roots: ["<rootDir>/src"],
  testMatch: [
    "**/__tests__/**/*.+(ts|tsx|js)",
    "**/?(*.)+(spec|test).+(ts|tsx|js)",
  ],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
      "identity-obj-proxy",
  },
  testEnvironment: "jsdom",
  setupFiles: ["whatwg-fetch"],
  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
};

[diasbruno]

This is really annoying (import problems)...react-modal should be "importable" by all sorts of modules systems.

If you are having problems, we are going to dig deep to find what is the problems.

Can you, please, create an example so we can see what is going on?

[jsoneaday]

Hi thank you for the help. I'm actually working on this through a project of mine here, https://github.com/jsoneaday/syntaxmakers/tree/video_4_add_rs_unit_tests. This is a mixed server client project so please go to the webclient folder and the affected files are on src/presentation/components Modal.tsx and Modal.test.tsx.

You'll find that if you update the react-modal import to use require the Modal.test.tsx test will pass, while keeping esmodules syntax it fails. Please only run the Modal.test.tsx file. Again thank you.

[diasbruno]

Have you tried import * as ReactModal from "react-modal";?

[jsoneaday]

That worked, but wondering why. Since the import without it works fine within the app. Thanks for the help.

[diasbruno]

It probably boils down to which transformers are involved on your project.