Testing recommendations

[danielhusar]

Hi!

Thanks for great library!

I had some hard time testing some of my animated components.
I have kind of figured it out at the end, but it was pretty pain to setup, mainly because there are no docs out there at all. (maybe somebody would have a better approach)

Here is the approach I used to test my component:

export default function MyComponent(props: Props) {
  const { enabled, children } = props;
  const animation = useSpring({
    from: {
      opacity: 0,
    },
    to: {
      opacity: enabled ? 1 : 0,
    },
    delay: 200,
  });

  return <animated.div style={animation}>{children}</animated.div>;
}

Test for this component:

import React from 'react';
import { act, render } from 'react-testing-library';
import MyComponent from '../my-component';

const props = {
  children: <span>Children</span>,
  enabled: false,
};

describe('MyComponent', () => {
  test('renders', () => {
    jest.useFakeTimers();
    const { container, unmount } = render(<MyComponent {...props} />);

    act(() => {
      expect(container).toMatchSnapshot();
      unmount();
    });
  });

  test('renders with enabled', () => {
    jest.useFakeTimers();
    const { container, unmount } = render(<MyComponent {...props} enabled={true} />);

    act(() => {
      expect(container).toMatchSnapshot('animates from');
    });

    act(() => {
      jest.runAllTimers();
      expect(container).toMatchSnapshot('animates to');
      unmount();
    });
  });
});

This is using jest (24.8.0, with JSDOM 15) and react-testing-library.
I had to also mock requestAnimationFrame.
You can do it like this: global.requestAnimationFrame = fn => setTimeout(fn, 16);.
It needs to go to setup-jest as if its inside test file, it doesn't work.

[aleclarson]

For the requestAnimationFrame mock, you can do this:

import { Globals } from 'react-spring'

Globals.assign({
  requestAnimationFrame: fn => setTimeout(fn, 16),
})

In the few tests we have for the Controller class, we use mock-raf which gives you finer control when stepping through the animation.

https://github.com/react-spring/react-spring/blob/4803f24539ee949c6c547b932df4bfe44f3be4f5/packages/core/src/Controller.test.ts#L6-L15

We have a fork of mock-raf that uses ES module syntax and has TypeScript definitions:
https://github.com/react-spring/mock-raf

Beyond that, I don't have much advice currently. We should definitely come up with some strategies for automation of visual tests. When it comes to animation, unit tests can only guarantee so much I think.

[danielhusar]

Nice, thanks so much, this is a life saver for us.

Our app runs in iframe, and firefox throttles requestAnimationFrame from iframes, so we have to call always window.parent.requestAnimationFrame

[jackmellis]

I want to turn animations off when doing visual regression testing snapshots.

Right now I feel like my best option is to completely stub the entire library with some pretty flimsy/brittle mocked out hooks.

It'd be great if there was an official way to achieve this or even an official mocked alternative. I kinda hoped it was as simple as setting some global config property or something, but I've not found anything in the docs...

[aleclarson]

@jackmellis See here: #668 (comment)

[jonniedarko]

@aleclarson that comment seems like its for v9 only which is not yet released, how do we do that in v8 ?

[gfox1984]

That discussion was really useful to solve my issues, but really, this should be in the Testing section of the docs...

[joshuaellis]

You're welcome to make such a contribution, it would be great to have our docs expanded in areas people know about 😄

[gfox1984]

where's the repo for the docs?

[joshuaellis]

where's the repo for the docs?

react-spring.io