Make @db-ui/ngx-elements/ and @db-ui/ngx-elements-enterprise compatible with Jest

Summary

As mentioned in this issue, jest might fail to test spec files when the associated components use db-ui.

Our Team is running into the same issue now, but with regular (non-standalone) angular components. We're referencing '@db-ui/ngx-elements/dist/lib' and '@db-ui/ngx-elements-enterprise/dist/lib' in our imports. The application builds and runs as expected, but Jest fails all spec files that reference components with a db-ui import. The application was set up as described here.

Jest fails to test angular components if they:

Directly import a class from the @db-ui node module
Import an NgModule that imports a class from the @db-ui node module

... with this message: Cannot find module '@db-ui/ngx-elements-enterprise/dist/lib' from 'src/app/features/.../component-name.component.spec.ts'

This does not seem to occur with other node_modules.

Here is what we tried so far:

Mock the import jest.mock('@db-ui/ngx-elements-enterprise/dist/lib'); That just leads to the same issue, as jest.mock() is unable to locate the db-ui module as well.

Adjust jest.config.ts

rootDir: './',
  roots: ['<rootDir>/src'],
  moduleNameMapper: {
    "@db-ui/ngx-elements/dist/lib":
      "node_modules/@db-ui/ngx-elements/dist/lib/fesm2022/lib.mjs",
    "@db-ui/ngx-elements-enterprise/dist/lib":
      "node_modules/@db-ui/ngx-elements-enterprise/dist/lib/fesm2022/lib.mjs",
  },

Jest fails to locate the module here as well:

   Configuration error:

    Could not locate module @db-ui/ngx-elements-enterprise/dist/lib mapped as:
    node_modules/@db-ui/ngx-elements-enterprise/dist/lib/fesm2022/lib.mjs.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/@db-ui\/ngx-elements-enterprise\/dist\/lib/": "node_modules/@db-ui/ngx-elements-enterprise/dist/lib/fesm2022/lib.mjs"
      },
      "resolver": undefined
    }

Change import paths Instead of import { DBUIElementsModule } from '@db-ui/ngx-elements-enterprise/dist/lib'; ... use import { DBUIElementsModule } from '../../../../../node_modules/@db-ui/ngx-elements-enterprise/dist/lib'; This results in the same import error

Try above solutions with standalone components Posts in the referenced issue (at the beginning of this post) stated the problem was fixed and it was fixed in an environment with standalone components. So, we made our components that use db-ui standalone as well, and removed db-ui imports from all our ngModules. Result: Any components importing the standalone components can no longer be tested as the import now fails in them.

Add missing "main" fields to package.json files in db-ui module See here: Seemed promising since the db-ui package.jsons in ngx-elements and ngx-elements-enterprise indeed do not contain a main field, but import continued to fail

The last solution seemed like a possible fix, as it would explain why other modules can be imported correctly, but db-ui can't. Unfortunately, it didn't seem to have an effect when we tried it.

How would you try to get jest working with db-ui components?

db-ui / elements

Make @db-ui/ngx-elements/ and @db-ui/ngx-elements-enterprise compatible with Jest #2876