teodosii / react-notifications-component

Delightful and highly customisable React Component to notify your users
https://teodosii.github.io/react-notifications-component/
MIT License
1.28k stars 73 forks source link

The component's test for closing by timeout failed #167

Open Smistav opened 1 year ago

Smistav commented 1 year ago

import {act, render, screen} from '@testing-library/react' import {ReactNotifications, Store} from "react-notifications-component";

jest.useFakeTimers(); describe('notification types hide after 2 second', () => { test('should hide info', async () => { render() act(() => { Store.addNotification({ type: 'info', message: 'notification info', container: "bottom-right", dismiss: { duration: 2000 } }) }) const notificationBefore = await screen.findByText('notification info') expect(notificationBefore).toBeInTheDocument() act(() => { jest.advanceTimersByTime(3000) }) const notificationAfter = await screen.findByText('notification info') expect(notificationAfter).not.toBeInTheDocument() }) }) jest.clearAllTimers()

The notification is not removed from the DOM even if you try to apply the method Store.removeAllNotifications(). Maybe I'm doing something wrong?

teodosii commented 1 year ago

can you post a CodeSandbox example that illustrates this? I know testing async stuff with timers it's not the most straightforward thing in Jest.

I'm not sure how advanceTimersByTime work and if it's actually reliable to use those, where I work I use this

render(<Component />);

await waitFor(
  () => {
    expect(loadUserMock).toHaveBeenCalled();
  },
  { timeout: 6000 }
);

It seems you're not using waitFor.

See if that helps maybe?