react-hot-toast icon indicating copy to clipboard operation
react-hot-toast copied to clipboard

Fix infinite loop during unit testing

Open silvenon opened this issue 3 years ago • 3 comments

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.

silvenon avatar Feb 14 '22 14:02 silvenon

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

vercel[bot] avatar Feb 14 '22 14:02 vercel[bot]

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

szamanr avatar Mar 18 '22 16:03 szamanr

Review this 🙏

JavierMartinz avatar Jun 03 '22 06:06 JavierMartinz