Skip to main content
Version: 2.x

Testing with Jest

Reanimated test mocks use web implementation of Reanimated2. Before you begin using Reanimated mocks you need some setup actions.

Setup​

Add the following line to your jest-setup.js file:

require('react-native-reanimated').setUpTests();

setUpTests() can take optional config argument. Default config is { fps: 60 }, setting framerate to 60fps.

To be sure, check if your jest.config.js file contains:

...
preset: 'react-native',
setupFilesAfterEnv: ['./jest-setup.js'],
...
caution

If you use Jest in a version older than 28, you should set setupFiles property instead of setupFilesAfterEnv

If you have custom babel configuration for testing, make sure that Reanimated's babel plugin is enabled for that environment.

API​

Style checker​

  • Checking equality of selected styles with current component styles

    expect(component).toHaveAnimatedStyle(expectedStyle)​

    component - tested component expectedStyle - contains expected styles of testing component, for example { width: 100 }

  • Checking equality of all current component styles with expected styles

    expect(component).toHaveAnimatedStyle(expectedStyle, {exact: true})​

  • You can get all styles of tested component by using getDefaultStyle

    getDefaultStyle(component)​

    component - tested component

Timers​

You can use jest timers to control animation

jest.useFakeTimers(); // jest.useFakeTimers('legacy') for jest >= 27
// call animation
jest.runAllTimers();

If you want more control over animation, you can use Reanimated wrapper for timers:

withReanimatedTimer(() => {
  // call animation
});

Inside of withReanimatedTimer you can use advanceAnimationByTime(timeInMs) or advanceAnimationByFrame(amountOfFrames) functions

  • Advance animation by a specified number of frames. You can specify the running duration of the animation and check the value of styles afterward.

    advanceAnimationByTime(timeInMs)​

    timeInMs - the duration specifying for how long animation should be advanced forward. Should have an integer value.
  • Advance animation by specific amount of animation frame.

    advanceAnimationByFrame(numberOfFrames)​

    numberOfFrames - number of animation frames to run. Should have an integer value.

Example​

Timer:

test('stop in a middle of animation', () => {
  withReanimatedTimer(() => {
    const style = { width: 0 };

    const { getByTestId } = render(<AnimatedComponent />);
    const view = getByTestId('view');
    const button = getByTestId('button');

    expect(view.props.style.width).toBe(0);
    expect(view).toHaveAnimatedStyle(style);

    fireEvent.press(button);
    advanceAnimationByTime(250); // if whole animation duration is a 500ms
    style.width = 46.08; // value of component width after 250ms of animation
    expect(view).toHaveAnimatedStyle(style);
  });
});

More example tests you can see in our repository

We are Software Mansion.

Hire us