ResizeObserver is not defined in testing

jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customization and ease-of-use

https://www.saltdesignsystem.com

Apache License 2.0

132 stars 89 forks source link

ResizeObserver is not defined in testing #1673

Closed efriandika closed 1 year ago

efriandika commented 1 year ago

Package name(s)

Core v1.4.0 (@salt-ds/core)

Description

I just added SaltProvider to our team react app, Then I get this below error when running our unit test:

ResizeObserver is not defined
ReferenceError: ResizeObserver is not defined

Steps to reproduce

Add SaltProvider to our team react app, Then create a unit test.

Expected behavior

There is better way to handle ResizeObserver

Operating system

[x] macOS
[ ] Windows
[ ] Linux
[ ] iOS
[ ] Android

Browser

[x] Chrome
[ ] Safari
[ ] Firefox
[ ] Edge

Are you a JPMorgan Chase & Co. employee?

[X] I am an employee of JPMorgan Chase & Co.

efriandika commented 1 year ago

Currently by adding: https://github.com/jpmorganchase/salt-ds/blob/c3b945f003c267ecb5efd1c0e89e2388c9407fce/modular/setupTests.ts#L7 can solve this.

However, It would be great if there is a better way to handle this out of the box

origami-z commented 1 year ago

This is a limitation of your unit test framework (assuming jsdom). Nothing really can be done from Salt side.

efriandika commented 1 year ago

Thanks for the reply @origami-z , I know it's limitation of JSdom. If you think it really can't be done from salt side. I suggest that it worth to mention in documentation.

james-nash commented 1 year ago

Bug ranking score: 35 (using rubric v3)

Priority: medium

========== BEGIN BUG RUBRIC SCORE DATA ===========
eyJ2YWx1ZXMiOnsiYWZmZWN0ZWRQZW9wbGVPcHRpb25zIjoxOS
wiYWZmZWN0ZWRDb21wb25lbnRzT3B0aW9ucyI6MTIsImZyZXF1
ZW5jeU9wdGlvbnMiOjE5LCJpbXBhY3RPcHRpb25zIjoxLCJhZm
ZlY3RlZERzT3B0aW9ucyI6MTcsInVyZ2VuY3lPcHRpb25zIjox
OSwieEZhY3Rvck9wdGlvbnMiOjE4fSwicnVicmljVmVyc2lvbi
I6M30=
=========== END BUG RUBRIC SCORE DATA ============

joshwooding commented 1 year ago

Hi @efriandika, sorry for the slow reply. As @origami-z said, this is a limitation of JSDom and quite a common one. I would either recommend using a test framework which has support for browser features or poly-filling/mocking it.

I think you'll run into this with almost any component library so I'm not sure how critical it is to document, as other component libraries seem not to document it.

I will close this for now, and if it has a lot of support, we can revisit this decision.

Thanks