[Modals]: type error in showToast function with vitest

[tkeiner]

Describe the bug

When using the useShowToast hook with Modals, the toast is displayed correctly. However, when vitest is used to run tests on the component, a type error occurs and tests are failing because of this.

Isolated Example

https://stackblitz.com/edit/github-u6ufad?file=src%2FApp.test.tsx

Reproduction steps

1. Setup vitest
2. Create Component using the useShowToast Hook
3. Execute Test for Component
4. see thrown error in console

Or go to StackBlitz example

1. run npm run test
2. see error in console

Expected Behaviour

Should not throw an TypeErrors

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

MacOS

Additional Context

As shown in the log output the error is thrown here.

I was able to fix the error by using a same structure as for the other Modal Components like this:

function showToast(props, setModal, container) {
  const ref = /*#__PURE__*/createRef();
  checkContext(setModal);
  const id = getRandomId();
  setModal?.({
    type: 'set',
    payload: {
      // @ts-expect-error: props type safety is covered by the `props` property
      Component: Toast,
      props: {
        ...props,
        open: true,
      },
      ref,
      container,
      id
    }
  });
  return {
    ref
  };
}

Or maybe just a ts-ignore is needed

Relevant log output

FAIL  TestToast.test.tsx > basic render
TypeError: el.show is not a function
 ❯ ref node_modules/@ui5/webcomponents-react/ssr/components/Modals/index.js:189:14
 ❯ node_modules/@ui5/webcomponents-react-base/dist/hooks/useSyncRef.js:8:17
 ❯ commitAttachRef node_modules/react-dom/cjs/react-dom.development.js:23689:18
 ❯ commitLayoutEffectOnFiber node_modules/react-dom/cjs/react-dom.development.js:23542:9
 ❯ commitLayoutMountEffects_complete node_modules/react-dom/cjs/react-dom.development.js:24727:9
 ❯ commitLayoutEffects_begin node_modules/react-dom/cjs/react-dom.development.js:24713:7
 ❯ commitLayoutEffects node_modules/react-dom/cjs/react-dom.development.js:24651:3
 ❯ commitRootImpl node_modules/react-dom/cjs/react-dom.development.js:26862:5
 ❯ commitRoot node_modules/react-dom/cjs/react-dom.development.js:26721:5
 ❯ performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:26156:3

Organization

SAP

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[MarcusNotheis]

Hi @tkeiner, I think the root cause of this issue is that the JSDOM environment has some constraints which are preventing the UI5 Web Components to boot properly. You can try to await the definition of the UI5 Web Components in your test before interacting with them, but this will result in a CSS parsing error because JSDOM is using an CSS parser which has not been maintained for years anymore:

await customElements.whenDefined('ui5-toast');

As an alternative, you could try using happy-dom or use a testing framework which runs in the browser like cypress or playwright.

[tkeiner]

Thanks for your feedback @MarcusNotheis, I was able to resolve the Issue by using the Toast Component directly.

[tkeiner]

Issue solved