Unable to pass Jest unit tests after upgrading [email protected] on IxToggle components

[cerenbattal]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

Hi,

we are developing a React app with iX, TailwindCSS and Webpack. We write our unit tests with Jest and React Testing Library.
After upgrading iX to 2.7.0, the unit tests that are written for IxToggle component fails, which are completely fine on version 2.5.0. As far as I investigate the issue, somehow click event does not detected on unit tests.

We also had attacInternals problem on our unit tests, but after adding global.HTMLElement.prototype.attachInternals on our jest.setup.js file, they are gone (please see my comment on #1612).

I have created a codesandbox project, which has the same dependencies with our project.

Thank you.

What type of frontend framework are you seeing the problem on?

React

Which version of iX do you use?

v2.7.0

Code to produce this issue.

https://codesandbox.io/p/devbox/ix-jest-problem-h8jyqm

[danielleroux]

@cerenbattal Your codesandbox is not accesibile, can you make it accessible or switch to stackblitz.

Regarding the fix did you already applied apply-pollyfill. Your testing enviroment must support https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals ?

[cerenbattal]

Hi @danielleroux,

I have installed element-internals-polyfill and imported it on my jest.setup.js file, but it has not solved my problem. My test environment supports custom elements and ElementInternals. You can see my test environment and versions on codesandbox. I have imported the exact same packages and versions with our project.
I changed the visibility of the project. Could you please try it again?
https://codesandbox.io/p/devbox/ix-jest-problem-h8jyqm

[danielleroux]

Hi @danielleroux,

I have installed element-internals-polyfill and imported it on my jest.setup.js file, but it has not solved my problem. My test environment supports custom elements and ElementInternals. You can see my test environment and versions on codesandbox. I have imported the exact same packages and versions with our project. I changed the visibility of the project. Could you please try it again? https://codesandbox.io/p/devbox/ix-jest-problem-h8jyqm

Can you add some more insights how to start the unit tests inside codesandbox.

Serve in general is not working:

[cerenbattal]

@danielleroux You can start unit tests and see the failing tests by running this command: npm run test:coverage

[danielleroux]

npm run test:coverage

Please fix the project first cannot execute the tests at all.