Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mask in "contenteditable" elements don't work in Jest/JSDOM #1058

Open
caribeedu opened this issue Jul 9, 2024 · 0 comments
Open

Mask in "contenteditable" elements don't work in Jest/JSDOM #1058

caribeedu opened this issue Jul 9, 2024 · 0 comments

Comments

@caribeedu
Copy link

Describe the bug
The imask package isn't able to recognize an contenteditable element in Jest unit testing. If I use an HTMLDivElement with mask, he work perfectly in browser but when executed in JSDOM, the error value should be a string will be trown.
This happens because JSDOM don't implement contenteditable API, that means HTMLElement.isContentEditable will be always undefined, what causes this validation to return false. Then the library thinks that my element is actually a HTMLInputElement, making the value search look for value property instead textContent property, like expected. This whole scenario what levers to the error mentioned above.

To Reproduce
To reproduce, just run npm run test. Code Sandbox

Expected behavior
The element rendered in fake DOM at tests behave like in browser DOM.

Environment:

  • OS: Windows 11
  • Browser: Chrome
  • Version: 125.0.6422.113
  • IMask version: 7.6.1
  • Framework: React 18 and Jest 29

Additional context
Even that I believe that is not an error of yours library, I do believe that is not intentional behavior and the README could have a disclaimer about that problem (JSDOM missing suport for contenteditable). If you are interested in provide a solution to make the tests easier for consumers, I would suggest to change this line from:

el.isContentEditable && el.tagName !== 'INPUT' && el.tagName !== 'TEXTAREA'

to:

el.getAttribute("contenteditable") !== null && el.tagName !== 'INPUT' && el.tagName !== 'TEXTAREA'

Manually changing this line at your library dist code, my test pass.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant