Query on Import errors while running automated test case using Jest

SubhashK

Hi All,

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

Jest Version : 29
babel version : 7
StencilJs version: 4

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

transformIgnorePatterns: [

"<rootDir>/node_modules/(?!(@refinitiv|lit|@lit|@stencil|ionicons)/)",

],

without the above transformIgnorePatterns below is the exact error.

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

with transformIgnorePatterns we are receiving following 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("<custom-datetime-picker></custom-datetime-picker>");

    |     ^

  8 |     const element = await page.find("custom-datetime-picker");

  9 |     expect(element).toHaveClass("hydrated");

Please suggest how to resolve these errors.

wasin.w

Hello @SubhashK

Thank you for reaching out to us. I am contacting the Element Framework team and I will get back to you.

wasin.w

Hello @SubhashK

The team suggest you check this Testing with Jest guideline and see if the issue still occurs.

SubhashK

https://community.developers.refinitiv.com/discussion/comment/124102#Comment_124102

Hi @wasin.w ,

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).*?)/(.*)": "<rootDir>/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

SubhashK

Also, is it possible to provide the pre-compiled version of @refinitiv-ui node module

"@refinitiv-ui/elements": "^7.10.9", 

"@refinitiv-ui/halo-theme": "^7.3.5",

wasin.w

Hello @SubhashK

The issue needs to be investigated in detail by the Element Framework team. I strongly suggest you contact the team directly. You can contact the team by go to the https://ui.refinitiv.com/ website and select Support —> Contact Us menu.