Skip to main content
Version: 3.x

Testing with Jest

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


First, make sure that your tests run with Node version 16 or newer.

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


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'],

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 in that environment.


Style checker

  • Checking equality of selected styles with current component styles


    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


    component - tested component


You can use Jest's fake timers to control animation progress. Check the full guide about mocking timers on Jest documentation website.

// call animation

If you want more control over animation, you can use jest.advanceTimersByTime to move to a certain point in the animation:

// call animation
// make assertions on what you expect the styles of a component should be after 250ms


The below code shows an example of test that runs a 250ms of animation and verifies the component style after that point in time.

// Setup fake timers – this can be done before the tests are run

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

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

jest.advanceAnimationByTime(250); // if whole animation duration is a 500ms
style.width = 50; // value of component width after 250ms of animation

Check links below for full examples of tests from Reanimated repo