From 347363f8facb21cccd90a623b6408681c83af452 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrycja=20Kali=C5=84ska?= Date: Wed, 11 Sep 2024 13:18:04 +0200 Subject: [PATCH] rewrite Testing with jest page --- .../docs/guides/testing-with-jest.mdx | 84 +++++++++---------- .../src/examples/TestExample.tsx | 84 +++++++++++++++++++ 2 files changed, 126 insertions(+), 42 deletions(-) create mode 100644 packages/docs-reanimated/src/examples/TestExample.tsx diff --git a/packages/docs-reanimated/docs/guides/testing-with-jest.mdx b/packages/docs-reanimated/docs/guides/testing-with-jest.mdx index 9878d0c761a..ddb794ac8b2 100644 --- a/packages/docs-reanimated/docs/guides/testing-with-jest.mdx +++ b/packages/docs-reanimated/docs/guides/testing-with-jest.mdx @@ -3,17 +3,35 @@ id: testing sidebar_label: 'Testing with Jest' --- +import TestSrc from '!!raw-loader!@site/src/examples/TestExample.tsx'; + # Testing with Jest -import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx'; +Reanimated provides testing API, based on Jest. It allows user to mock web-based animations. - +## Reference -Reanimated test mocks use web implementation of Reanimated2. Before you begin using Reanimated mocks you need some setup actions. +```js +test('reference', () => { + // some styles -## Setup + const { getByTestId } = render(); + const view = getByTestId('view'); + const button = getByTestId('button'); + + // highlight-next-line + expect(view).toHaveAnimatedStyle(style); -First, make sure that your tests run with Node version 16 or newer. + fireEvent.press(button); + jest.advanceTimersByTime(250); // if whole animation duration is a 500ms + + style.width = 50; // value of component width after 250ms of animation + // highlight-next-line + expect(view).toHaveAnimatedStyle(style); +}); +``` + +## Setup Add the following line to your `jest-setup.js` file: @@ -21,7 +39,7 @@ 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. +- `setUpTests()` can take optional config argument. Default config is `{ fps: 60 }`. To be sure, check if your `jest.config.js` file contains: @@ -38,28 +56,26 @@ If you use Jest in a version **older than 28**, you should set `setupFiles` prop ::: -If you have custom babel configuration for testing, make sure that Reanimated's babel plugin is enabled in that environment. - ## API -#### Style checker +### Style checker + +#### `expect(component).toHaveAnimatedStyle(expectedStyle)` -- Checking equality of selected styles with current component styles +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 }`. - `component` - tested component - `expectedStyle` - contains expected styles of testing component, for example `{ width: 100 }` +#### `expect(component).toHaveAnimatedStyle(expectedStyle, {exact: true})` -- Checking equality of all current component styles with expected styles +Checking equality of all current component styles with expected styles. - #### `expect(component).toHaveAnimatedStyle(expectedStyle, {exact: true})` +#### `getDefaultStyle(component)` -- You can get all styles of tested component by using `getDefaultStyle` - #### `getDefaultStyle(component)` - `component` - tested component +Gets all styles of tested component. -#### Timers +### Timers You can use Jest's fake timers to control animation progress. Check [the full guide about mocking timers on Jest documentation website](https://jestjs.io/docs/timer-mocks). @@ -81,33 +97,17 @@ jest.advanceTimersByTime(250); ## Example -The below code shows an example of test that runs a 250ms of animation and verifies the component style after that point in time. - -```js -// Setup fake timers – this can be done before the tests are run -jest.useFakeTimers(); + -test('stop in the middle of animation', () => { - const style = { width: 0 }; - - const { getByTestId } = render(); - const view = getByTestId('view'); - const button = getByTestId('button'); +More examples from `react-native-reanimated` repository: - expect(view.props.style.width).toBe(0); - expect(view).toHaveAnimatedStyle(style); - - fireEvent.press(button); - jest.advanceTimersByTime(250); // if whole animation duration is a 500ms - style.width = 50; // value of component width after 250ms of animation - expect(view).toHaveAnimatedStyle(style); -}); -``` +- [SharedValue.test.tsx](https://github.com/software-mansion/react-native-reanimated/tree/main/packages/react-native-reanimated/__tests__/Animation.test.tsx) +- [Animation.test.tsx](https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/__tests__/SharedValue.test.tsx) -Check links below for full examples of tests from Reanimated repo +## Remarks -- [SharedValue.test.tsx](https://github.com/software-mansion/react-native-reanimated/tree/main/__tests__/SharedValue.test.tsx) -- [Animation.test.tsx](https://github.com/software-mansion/react-native-reanimated/tree/main/__tests__/Animation.test.tsx) +- Tests must run with Node 16 or newer. +- If you have custom babel configuration for testing, make sure that Reanimated's babel plugin is enabled in that environment. ## Recommended testing library diff --git a/packages/docs-reanimated/src/examples/TestExample.tsx b/packages/docs-reanimated/src/examples/TestExample.tsx new file mode 100644 index 00000000000..4201b46e7ca --- /dev/null +++ b/packages/docs-reanimated/src/examples/TestExample.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { View, Button } from 'react-native'; +import Animated, { + useAnimatedStyle, + withTiming, + useSharedValue, + SharedValue, +} from 'react-native-reanimated'; + +interface Props { + sharedValue: SharedValue; +} + +const AnimatedSharedValueComponent = (props: Props) => { + const widthSV = props.sharedValue; + + const style = useAnimatedStyle(() => { + return { + width: withTiming(widthSV.value, { duration: 500 }), + }; + }); + + return ( + + +