id | title | sidebar_label |
---|---|---|
testing |
Testing with Jest |
Testing with Jest |
Reanimated test mocks use web implementation of Reanimated2. Before you begin using Reanimated mocks you need some setup actions.
Add the following line to your jest-setup.js
file:
require('react-native-reanimated/lib/reanimated2/jestUtils').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',
setupFiles: ['./jest-setup.js'],
...
If you have custom babel configuration for testing, make sure that Reanimated's babel plugin is enabled for that environment.
-
Checking equality of selected styles with current component styles
component
- tested componentexpectedStyle
- contains expected styles of testing component, for example{ width: 100 }
-
Checking equality of all current component styles with expected styles
-
You can get all styles of tested component by using
getDefaultStyle
component
- tested component
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.
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.
numberOfFrames
- number of animation frames to run. Should have an integer value.
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);
moveAnimationByTime(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
- @testing-library/react-native
- @testing-library/react-hooks - for dealing with hooks