'Testing Svelte components with dynamically imported components in jest (await import)

I'm writing a test in jest for a svelte component which dynamically imports another component. The following snippet is the part where the dynamic import happens.

async function importComponent() {
    if (!dynamicComponent) {
      dynamicComponent= (await import('../Component')).Component;
    }
  }

my jest config (in package.json)

"jest": {
    "globals": {
      "ts-jest": {
        "isolatedModules": true,
        "tsConfig": "./tsconfig.json",
      }
    },
    "testEnvironment": "jsdom",
    "verbose": true,
    "transform": {
      "^.+\\.svelte$": [
        "svelte-jester",
        {
          "preprocess": true
        }
      ],
      "^.+\\.ts$": "ts-jest",
      "^.+\\.js$": "babel-jest"
    },
    "setupFilesAfterEnv": [
      "<rootDir>/setupTests.ts"
    ],
    "moduleFileExtensions": [
      "js",
      "ts",
      "svelte"
    ]
  }

The failing test

it('should open on click', async () => {
  const { getByRole } = render(ComponentUnderTest, { ...dummyProps });
  const loadComponentButton = getByRole('button');

  await fireEvent(loadComponentButton,  new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
  }));
});

I tried to solve the problem with babel plugins "dynamic-import-node" and/or "@babel/plugin-syntax-dynamic-import". But the result is the same.

I also tried to use jest-next-dynamic (which is used for mocking dynamic imports with the nextjs dynamic import syntax)

I also tried to mock the dynamic import but without any success - or rather I didn't know how to mock the import...

It is not important to me if I actually import the component during the testrun, preload the component or just mock it - the test should just run without throwing errors

Please let me know if I should provide any additional information!

Update

The Test fails with the following message:

Error: You need to run with a version of node that supports ES Modules in the VM API. See https://jestjs.io/docs/ecmascript-modules.

I'm running Node v16.4.2 btw - I tried the solution described in the link but the result was that all test were failing. Maybe my understanding of how the test is executed is wrong but I run the tests in in the jsdom-environment and not in a node environment so I don't really get the error?

At the moment my goal is to just mock import() somehow.

UDPATE: Workaround suggested by @DavidDalBusco in the comments

Ultimately I moved the lazy import in a middle / proxy file. In that way I can mock the lazy loading part and test my component and on the other way can write dedicated tests for my services. – David Dal Busco



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source