@ui5/webcomponents-react: jest configuration to transpile ui5 web component code

[shen-lin]

Describe the issue
I have an ejected react app by using create-react-app. When I try to setup the unit test, I got error

TypeError: WebComponent.getMetadata is not a function

at ../../../node_modules/@ui5/webcomponents-react/cjs/main.development.js:250:38
      at renderWithHooks (../../../node_modules/react-dom/cjs/react-dom.development.js:12938:18)
      at updateForwardRef (../../../node_modules/react-dom/cjs/react-dom.development.js:14457:20)
      at beginWork (../../../node_modules/react-dom/cjs/react-dom.development.js:15661:16)
      at performUnitOfWork (../../../node_modules/react-dom/cjs/react-dom.development.js:19312:12)
      at workLoop (../../../node_modules/react-dom/cjs/react-dom.development.js:19352:24)
      at renderRoot (../../../node_modules/react-dom/cjs/react-dom.development.js:19435:7)
      at performWorkOnRoot (../../../node_modules/react-dom/cjs/react-dom.development.js:20342:7)
      at requestWork (../../../node_modules/react-dom/cjs/react-dom.development.js:20090:7)
      at scheduleWork (../../../node_modules/react-dom/cjs/react-dom.development.js:19911:5)
      at scheduleRootUpdate (../../../node_modules/react-dom/cjs/react-dom.development.js:20572:3)
      at updateContainerAtExpirationTime (../../../node_modules/react-dom/cjs/react-dom.development.js:20600:10)
      at updateContainer (../../../node_modules/react-dom/cjs/react-dom.development.js:20657:10)
      at ReactRoot.Object.<anonymous>.ReactRoot.render (../../../node_modules/react-dom/cjs/react-dom.development.js:20953:3)
      at ../../../node_modules/react-dom/cjs/react-dom.development.js:21090:14
      at unbatchedUpdates (../../../node_modules/react-dom/cjs/react-dom.development.js:20454:14)
      at legacyRenderSubtreeIntoContainer (../../../node_modules/react-dom/cjs/react-dom.development.js:21086:5)
      at Object.render (../../../node_modules/react-dom/cjs/react-dom.development.js:21155:12)

If I modified the code in node_modules/@UI5 like this:

WebComponent.default.getMetadata()

Similarly, in node_modules/@ui5/webcomponents/webcomponents-react/cjs/main.development.js, I change boot().then(...) to boot.default().then(...). After these two changes, my unit test runs successfully.

I think my jest config is not correct so that I run into this problem that is related to:

https://stackoverflow.com/questions/33505992/babel-6-changes-how-it-exports-default

But I am not able to figure out the correct configuration to pass this error. Could you suggest how can I fix this issue?

To Reproduce

The github repository is in corporate github. I can send you the repository url by email.

[MarcusNotheis]

Hi @shen-lin,

I guess you need to transpile the node modules as well, you can take a look at our jest config.

If that doesn't help, you can send me the repository link via mail or slack and I can try to figure out something.

Best regards,
Marcus

[MarcusNotheis]

Maybe we have to wait for jsdom/jsdom#2548 to be merged.

[MarcusNotheis]

Hi @shen-lin, short update to that topic:
We were able to run snapshot tests in a standard create-react-app application by extending the package.json with the following configuration:

{
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(@ui5|lit-html)).*\\.js$"
    ]
  }
}

[MarcusNotheis]

Hi @shen-lin,
the new JSDOM version is now finally released 🎉
You can use update your test setup following this guide: https://sap.github.io/ui5-webcomponents-react/?path=/docs/1-welcome-test-setup--page

Best regards,
Marcus

[azlekov]

@MarcusNotheis

You can use update your test setup following this guide: https://sap.github.io/ui5-webcomponents-react/?path=/docs/1-welcome-test-setup--page

Couldn't find story matching '1-welcome-test-setup--page'.

[MarcusNotheis]

Sorry, the links have been updated: https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base--page