I have a few circular dependencies in my application. It doesn't affect in production, the app works OK. But now I started to write unit tests using jest and now some of my imports returns undefined. And because of that I can't write a single test.

Even when I try to render whole application, there are a few undefined in the imports.

I can't remove these circular dependencies, because it would take a lot of time.

How can I deal with it?

Here are some examples of errors given by Jest

TypeError: Cannot read properties of undefined (reading 'sensorTypeRenderer')

      4 | import { Renderers, ColumnDescriptionGenerators } from '@ponents';
    > 6 | import sensorTypeRenderer = Renderers.sensorTypeRenderer;

Here's the service is not found because EventsGroupsStore is undefined

ServiceNotFoundError: Service with "<UNKNOWN_IDENTIFIER>" identifier was not found...

    > 204 |                 return Container.get(EventsGroupsStore);

I have a few circular dependencies in my application. It doesn't affect in production, the app works OK. But now I started to write unit tests using jest and now some of my imports returns undefined. And because of that I can't write a single test.

Even when I try to render whole application, there are a few undefined in the imports.

I can't remove these circular dependencies, because it would take a lot of time.

How can I deal with it?

Here are some examples of errors given by Jest

TypeError: Cannot read properties of undefined (reading 'sensorTypeRenderer')

      4 | import { Renderers, ColumnDescriptionGenerators } from '@ponents';
    > 6 | import sensorTypeRenderer = Renderers.sensorTypeRenderer;

Here's the service is not found because EventsGroupsStore is undefined

ServiceNotFoundError: Service with "<UNKNOWN_IDENTIFIER>" identifier was not found...

    > 204 |                 return Container.get(EventsGroupsStore);

• javascript
• reactjs
• typescript
• unit-testing
• jestjs

1 Answer 1

The problem was not really with the circular dependencies. I just configured aliases incorrectly.

That's how it should be:

    moduleNameMapper: {
        "^@src(.*)": "<rootDir>/src$1",
        "^@tests(.*)": "<rootDir>/tests$1",
        "^@data(.*)": "<rootDir>/tests/mockData$1",
        "^@domain(.*)": "<rootDir>/src/domain$1",
        "^@service(.*)": "<rootDir>/src/service$1",
        "^@utils(.*)": "<rootDir>/src/utils$1",
        "^@view(.*)": "<rootDir>/src/view$1",
        "^.+\\.(css|scss)$": "<rootDir>/tests/styleMock.js",
        "^@resources": "<rootDir>/tests/styleMock.js",
        "^@ponents(.*)": "<rootDir>/src/ponents$1",
    },

And I just didn't add these (.*) and $1