How to write tests for useTransition with v9 api?

[fernandofleury]

🤓 Question

(I did search around stackoverflow and spectrum)

How to properly test useTransition using v9 api? I've tried using https://github.com/react-spring/mock-raf but tests will hang with it. Also tried mocking raf to a regular:

const FPS = 16;
global.requestAnimationFrame = (callback) => {
  setTimeout(callback, FPS);
};

Testing items being added seems to work as expected, but I can't get to properly test item removal, for example:

    it('should remove a notification on click', async () => {
      const { queryByTestId } = renderComponent();

      fireEvent.click(queryByTestId('button-selector');

      expect(queryByTestId('notification-selector')).toBeTruthy();

      jest.advanceTimersByTime(NOTIFICATION_TIMER);

      expect(queryByTestId('notification-selector')).toBeNull();
    });

[fernandofleury]

Moving this to spectrum to try to get some traction 👀

[aleclarson]

Have you tried the skipAnimation global?

import { Globals } from 'react-spring'

Globals.assign({ skipAnimation: true })

I've tried using react-spring/mock-raf but tests will hang with it.

We use that lib for internal tests, and it works as expected, so you're likely misusing it.

[fernandofleury]

@aleclarson what was actually mixing things up was jest.useFakeTimers.

After removing it, skipAnimation worked as intended. I still would like to test "auto" remove by exceeding the timer, but I guess I need to investigate that further. In the end mock-raf wasn't even needed!

[m98]

@aleclarson using Globals.assign({ skipAnimation: true }) in a .test.tsx file gives me the following error (I'm using version 9.0.0-rc.3):

TypeError: Cannot read property 'assign' of undefined

[dbarrett24]

I'm using the exact Globals.assign({ skipAnimation: true }) syntax, but my useTransition which is a loading screen animation still seems to render instead of the page content I would expect to show up afterwards. When I use fakeTimers and advanceTimersByTime things work fine, thought I can't test DOM removal afterwards. 🤔

I can't find anything on the internet about this. Curious to learn how skipAnimation is intended to work with useTransition

[joshuaellis]

I'm using the exact Globals.assign({ skipAnimation: true }) syntax, but my useTransition which is a loading screen animation still seems to render instead of the page content I would expect to show up afterwards. When I use fakeTimers and advanceTimersByTime things work fine, thought I can't test DOM removal afterwards. 🤔

I can't find anything on the internet about this. Curious to learn how skipAnimation is intended to work with useTransition

Feel free to open a new issue on this where we can focus on your particular siturations