Having issues with jest testing going from swagger-ui-react 4.19.1 to 5.X cannot find module '#swagger-ui'

Q&A (please complete the following information)

OS: WSL Ubuntu 22.04 Windows 10
Browser: Chrome
Version: 129.0.6668.59
Method of installation: npm install
Swagger-UI version: 5.X in general but as of now 5.17.14
Swagger/OpenAPI version: OpenAPI 3.0

Screenshots

How can we help?

Snippet of my code that I am testing:

import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

When I was running create react app (react-scripts 5.0.1) and jest with swagger-react-ui 4.19.1 I had no issues with jest rendering the SwaggerUI component from swagger-ui-react. Everything ran and the tests all passed.

Due to a security vulnerability in 4.19.1 I am being forced to upgrade to swagger-react-ui 5.X (currently trying the latest which is 5.17.14 as of writting this.

When I run jest it looks like it's trying to pull from the node_modules/swagger-ui-react/index.cjs which is what i'd expect... however within that file there is a line that looks like this:

var _swaggerUi = _interopRequireDefault(require("#swagger-ui"));

This is where jest cannot find #swagger-ui module.

I would like to say that as far as my react-app goes everything runs just fine, it's ONLY testing with jest do i get this issue.

Any help is appreciated.

One thing I have tried which didn't work: In jest I have used the moduleNameMapper to map the #swagger-ui module to point to node_modules/swagger-ui-react/swagger-ui.js But this yields other errors and on and on it goes.

The reason I am mapping to that specific file is because in the package.json within the swagger-ui-react i read this json:

"imports": {
    "#swagger-ui": {
      "browser": {
        "import": "./swagger-ui-es-bundle-core.js",
        "require": "./swagger-ui.js"
      },
      "node": {
        "import": "./swagger-ui-bundle.js",
        "require": "./swagger-ui-es-bundle.js"
      },
      "default": {
        "import": "./swagger-ui-bundle.js",
        "require": "./swagger-ui-es-bundle.js"
      }
    }
  }

The module mapper looks like this:

"moduleNameMapper": {
        "/^#swagger-ui/": "node_modules/swagger-ui-react/swagger-ui.js"
      }

This is the output:

Cannot find module 'swagger-client/es/resolver/strategies/generic' from 'node_modules/swagger-ui-react/swagger-ui.js'

    Require stack:
      node_modules/swagger-ui-react/swagger-ui.js
      node_modules/swagger-ui-react/index.cjs

I have gone a few layers deep with this mapping (i.e. mapping the `swagger-client/es/resolver/strategies/generic` to it's source but I still cannot get it to work.

I have also tried using the es-bundle and the non-es bundle like such:

"moduleNameMapper": {
      "^!mapbox-gl": "mapbox-gl",
      "^#swagger-ui": "<rootDir>/node_modules/swagger-ui-react/swagger-ui-es-bundle.js"
    }

This is the error I get on the react-testing-library render function:

 TypeError: Cannot read properties of null (reading 'useMemo')

      107 |       })
      108 |     );
    > 109 |     render(
          |           ^
      110 |       <HashRouter>
      111 |         <AuthContext.Provider value={mockAuthContext}>
      112 |           <APIDocumentation />

      at Object.useMemo (node_modules/swagger-ui-react/swagger-ui-bundle.js:2:461419)
      at Component (node_modules/swagger-ui-react/swagger-ui-bundle.js:2:1098171)
      at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18)
      at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20074:13)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:21587:16)
      at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:27426:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26560:12)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
      at recoverFromConcurrentError (node_modules/react-dom/cjs/react-dom.development.js:25850:20)
      at callback (node_modules/react-dom/cjs/react-dom.development.js:25750:22)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at actImplementation (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:63:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:159:25)
      at render (node_modules/@testing-library/react/dist/pure.js:246:10)
      at Object.<anonymous> (src/__tests__/testSwaggerPage.js:109:11)

If anyone has gotten further than me i would much appreciate the help!

swagger-api / swagger-ui