search

telekom / scale

Scale is the digital design system for Telekom products and experiences.
https://telekom.github.io/scale/
Other
376 stars 83 forks source link

Unit testing ScaleTextField (React) #1101

Open vissarionas opened 2 years ago

vissarionas commented 2 years ago

We have a hard time firing events against the ScaleTextField component, ending up with The given element does not have a value setter

Here is a simple sandbox, that mimics our environment, and demonstrates the issue. https://codesandbox.io/s/quizzical-meninsky-s5de1k

nowseemee commented 2 years ago

Hi @vissarionas, we will take a look and try to help. Thanks for bringing up this topic!

acstll commented 2 years ago

After trying a bit my guess is that in the tests, the web components are not being upgraded (aka rendered), because there is not call to defineCustomElements() (as in index.js).

If I console.log the inputField element in the test I get <scale-text-field label="Your input" placeholder="input goes here" inputautofocus="true"></scale-text-field> as expected, but then there's nothing inside of it, even if I wait a couple of seconds, and even after something like await customElements.whenDefined("scale-text-field"). 🤔

If I try calling defineCustomElements() in the test I get an error and I'm guessing that's because whatever environment Jest is using (jsdom?), there's no full support for web components. But it's a guess.

That's my 2 cents.

mato-a commented 2 years ago

Hi all,

Here is a blog describing the issue related to testing web components in jest. https://www.ninkovic.dev/blog/2020/testing-web-components-with-jest-and-lit-element

The issue is that jsdom support for web components is limited, so the recommendation from the blog post is to change the Jest runner to electron.

I haven't tried it yet but we will probably switch our project to jest and then we might have to use electron runner instead of the default. Will let you know if we get there....