Skip to content

Conversation

@piaskowyk
Copy link
Member

Summary

// TODO

This PR comes with PoC of runtime tests micro framework for Reanimated

@piaskowyk piaskowyk changed the title [Experimental] Runtime tests - reJest [Experimental] [0] Runtime tests - reJest Nov 24, 2023
piaskowyk and others added 3 commits December 18, 2023 11:10
Based on the changes in our libraries mentioned in this PR
(software-mansion/react-native-gesture-handler#2635),
we need to make adjustments to our `.podspec` file. We should utilize
the `install_modules_dependencies` feature available in React Native
since version 0.72.

Backward compatibility:
<img width="126" alt="image"
src="https://github.com/software-mansion/react-native-reanimated/assets/36106620/ce5c1c67-8251-47d6-8d4b-98c959a4dfb8">

Check CI

---------

Co-authored-by: Tomek Zawadzki <[email protected]>
@piaskowyk
Copy link
Member Author

#5400 contains this PR

@piaskowyk piaskowyk closed this Dec 19, 2023
github-merge-queue bot pushed a commit that referenced this pull request Mar 12, 2024
## Summary

This PR comes with mikro-framework for Reanimated public API runtime
tests
Based on:
#5406

## Example usage

### 1. Create testing container in your application

```js
import React from 'react';
import RuntimeTestsRunner from './ReanimatedRuntimeTestsRunner/RuntimeTestsRunner';

import './Animations.test'; // import tests

export default function RuntimeTestsExample() {
  return <RuntimeTestsRunner />;
}
```

### 2. Implement tests `Animations.test.ts`

```js
import React, { useEffect } from 'react';
import { View } from 'react-native';
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { describe, test, expect, render, useTestRef, getTestComponent, wait } from './ReanimatedRuntimeTestsRunner/RuntimeTestsApi';

const AnimatedComponent = () => {
  const widthSV = useSharedValue(0);
  const ref = useTestRef('AnimatedComponent');

  const style = useAnimatedStyle(() => ( {
    width: withTiming(widthSV.value, { duration: 500 }),
  }));

  useEffect(() => {
    widthSV.value = 100;
  }, [widthSV]);

  return (
    <View
      style={{ flex: 1, flexDirection: 'column' }}>
      <Animated.View
        ref={ref}
        style={[{ height: 80,  backgroundColor: 'blue' }, style]}
      />
    </View>
  );
};

describe('Tests of animations', () => {
  test('withTiming - expect pass', async () => {
    await render(<AnimatedComponent />);
    const component = getTestComponent('AnimatedComponent');
    await wait(600);
    expect(await component.getAnimatedStyle('width')).toBe('100');
  });
});
```

## API

- `describe`
- `test`
- `expect`
- `render`
- `useTestRef`
- `getTestComponent`
- `component.getAnimatedStyle`
- `mockAnimationTimer`
- `recordAnimationUpdates`
- `updatesContainer.getUpdates`
- `updatesContainer.getNativeSnapshots`
- `callTracker`
- `callTrackerFn`
- `getTrackerCallCount`
- `registerValue`
- `getRegisteredValue`
- `Presets`
- `notify`
- `waitForNotify`
- `wait`

---------

Co-authored-by: Krzysztof Piaskowy <[email protected]>
Co-authored-by: Aleksandra Cynk <[email protected]>
Co-authored-by: Tomek Zawadzki <[email protected]>
Co-authored-by: Tomasz Żelawski <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant