Request for Help: e2e Testing issues with React, Stencil and Jest

[PIYUSHWW2024]

Hi Team,

We are trying to repackage ef-datetime-picker component using StencilJS. Integration worked well; we can use the component, and it works well. However, we are having trouble in executing automated e2e testcase using Jest.

Any immediate help would be greatly appreciated.

Test Repo: https://github.com/kirangopu/EFCalender.git

Jest Version : 29
babel version : 7
StencilJs version: 4
node : 20.12.2
npm version: 10.5.0

We are getting following error when executing e2e test cases

SyntaxError: Cannot use import statement outside a module

1❘ import "@refinitiv-ui/elements/number-field/themes/ds/light";
Λ
2 | import "@refinitiv-ui/elements/icon/themes/ds/light";
3 | import "@refinitiv-ui/elements/tooltip/themes/ds/light";
4
dispatchEvent(
ΑΛΛΛΛΛ
at

After adding below config in stencil.config file to parse the component as we were getting import errors.

Config:

transformIgnorePatterns: [
"/node_modules/(?!(@Refinitiv|lit|@lit|@Stencil|ionicons)/)",
],

Error:
custom-datetime-picker › renders
App did not load in allowed time. Please ensure the content loads a stencil application.
5 |   it("renders", async () => {
6 |     const page = await newE2EPage();

7 |     await page.setContent("");
|     ^
8 |     const element = await page.find("custom-datetime-picker");
9 |     expect(element).toHaveClass("hydrated");

We added following config section to package.json, still the test cases are failing. We are getting a warning as shown below. Looks like moduleNameMapper is not taking effect and code is unable to import any module which is nested inside /lib/.

Config Added:

"jest": {
"transformIgnorePatterns": ["node_modules/(?!@refinitiv-ui)/"],
"moduleNameMapper": { "@refinitiv-ui/((?!.-theme).?)/(.*)": "/node_modules/@refinitiv-ui/$1/lib/$2" }
}

Warning Received:

[ WARN ] Bundling Warning UNRESOLVED_IMPORT
'@refinitiv-ui/elements/overlay/themes/halo/light' is imported by
src\components\custom-date-picker\custom-date-picker-style.ts, but could not be resolved – treating it as an external dependency

Please suggest how to resolve these issues.