timolins / react-hot-toast

Smoking Hot React Notifications 🔥
https://react-hot-toast.com
MIT License
9.86k stars 331 forks source link

Fix infinite loop during unit testing #154

Closed silvenon closed 2 years ago

silvenon commented 2 years ago

Fixes #107.

During unit testing Toaster is being updated infinitely because it's waiting for height of toast messages to be truthy, which will never happen in jsdom because it's not possible to measure elements there, so it always returns 0.

https://github.com/timolins/react-hot-toast/blob/c5e59351d511d8702b065378a6859c795b05547d/src/components/toaster.tsx#L84-L88

This part is now more specific, it checks whether the height is a number or not, which includes 0, and in addition with some memoizations it no longer causes an infinite loop. I added a test to verify this.

The only remaining tricky part is that immediately dismissing the toast doesn't work because the store is yet to be updated with the toast height, which clears the toast message from the remove queue, so I worked around this by adding aria-hidden to the close button until the height has been initialized, so that I have something to wait for before I dismiss the toast message.

People testing react-hot-toast will also have to do something like this if they want to close immediately after opening.

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/timo/react-hot-toast/EgN8uEsGqf7egSW79PcVxsV6fgZR
✅ Preview: https://react-hot-toast-git-fork-silvenon-testing-library-loop-timo1.vercel.app

szamanr commented 2 years ago

@timolins could you or whoever is maintaining the repo review this please? :pray:

JavierMartinz commented 2 years ago

Review this 🙏