Problems with testing toast.dismiss using react-testing-library

Do you want to request a feature or report a bug? Help testing with React-testing-library

What is the current behavior?

I am trying to write a test for toasting a message that doesnt go away by itself (closeButton={false}, autoClose={false}, closeOnClick={false}, draggable={false}) and the user has to explicitly dismiss the toast by clicking a button inside of the toast. This behaviour works fine normally, it just seems like the tests dont work

The test expects that the toast appears and then when the user clicks the “dismiss button”, the toast is removed from the UI.

When I dont use fake timers, I can see the toast appearing, but clicking the “dismiss button” does not dismiss the toast. It fails in the waitForElementToBeRemoved function from React-testing-library. I tried increasing the timeout also but that doesnt seem to fix the issue.

When I use fake timers (from jest) I dont even see the toast appear. I have tried jest.runAllTimers() and jest.advanceTimersByTime(1000) but neither seem to work. Codesandbox fails with jest.useFakeTimers is not a function, which seems to be an issue on their part but I guess the test can be copied over to run locally to see that the toast does not appear. Running debug() from RTL also shows that the UI does not include any toast message - but I can see the toast container.

Am I doing something wrong here? I have looked at the tests in this project and tried to mimic them, but have not been successful https://github.com/fkhadra/react-toastify/blob/cc011ea9f820d4282a0cbb211d3417afaf8cfb06/test/core/toast.test.tsx https://github.com/fkhadra/react-toastify/blob/cc011ea9f820d4282a0cbb211d3417afaf8cfb06/test/components/ToastContainer.test.tsx

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/unruffled-dust-033f5

What is the expected behavior?

The tests from the CodeSandbox should run successfully, the toast should be visible in the UI and then when the user clicks “dismiss”, it is removed from the UI.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

I am running React 16 in my project, but the problem is also reproducible in React 17 (codesandbox uses that version).

[alexandre-lim]

Hello @fkhadra, I have the same issue trying to test with RTL. Using the code above works fine to check the display of the toast but I can’t check that the toast is being removed even using waitForElementToBeRemoved because it will timeout. I’m sorry to post in an issue that is closed, I can open a new issue about this problem or is it possible de reopen it ? Thank you.

[fkhadra]

@AriHrannar This is indeed really weird. I’m able to reproduce the issue locally. I’ll check react-testing-library release notes. This is weird