You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have searched for existing issues that already report this problem, without success.
Stencil Version
4.14.0
Current Behavior
Following up on #5252 (comment): When using testing-library/dom with stencil errors occur when using getByRole and getByLabelText
getByRole
Right-hand side of 'instanceof' is not an object
getByLabelText:
TestingLibraryElementError: Found a label with the text of: Test, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
Expected Behavior
Both methods should find the respective element without errors
@angelo-v thanks for raising the issue and for providing a reproducible example. I looked into this and it seems that Stencils Mock Doc component doesn't have SVGElement as a global accessible class. This can be patched by adding it to the setupGlobal method:
However this will still fail as Testing Library verifies if given nodes are instanceof HTMLElement or SVGElement. For some reasons the instances fetched from Testing Library and the virtual DOM are not and instance of these classes, e.g. their mocked representations.
I will label this issue to move it into our backlog so we can take a look at this at some point. In the meantime I recommend to take a look at some alternatives we provide for testing Stencil components: via WebdriverIO or via Playwright.
I will label this issue to move it into our backlog so we can take a look at this at some point. In the meantime I recommend to take a look at some alternatives we provide for testing Stencil components: via WebdriverIO or via Playwright.
Thanks for adding this to your backlog. Being able to test with testing-library is an important level in my testing pyramid. I am already using playwright at an e2e level. It might also be suitable for integration level. But for unit testing I try to only render a single component and test the dom from a user perspective using testing library. For now I will have to stick with native dom operations like querySelector, which does it's job but is not as readable and user-centered as the testing-library approach.
Prerequisites
Stencil Version
4.14.0
Current Behavior
Following up on #5252 (comment): When using testing-library/dom with stencil errors occur when using getByRole and getByLabelText
getByRole
getByLabelText:
Expected Behavior
Both methods should find the respective element without errors
System Info
Steps to Reproduce
see repo
Code Reproduction URL
https://github.com/angelo-v/stencil-testing-library-dom-error/blob/8cc444465b5db82efd6ec7a71c00a7b60f8e08e4/src/components/my-component/my-component.spec.ts
Additional Information
No response
The text was updated successfully, but these errors were encountered: