Add test of chain

app/src/examples/RuntimeTests/RuntimeTestsExample.tsx

@@ -15,6 +15,8 @@ import './tests/utilities/relativeCoords.test';
 
 import './tests/core/useSharedValue.test';
 import './tests/core/useAnimatedStyle/reuseAnimatedStyle.test';
+import './tests/core/useDerivedValue/basic.test';
+import './tests/core/useDerivedValue/chain.test';
 
 export default function RuntimeTestsExample() {
   return <RuntimeTestsRunner />;

app/src/examples/RuntimeTests/tests/core/useDerivedValue/chain.test.tsx

@@ -0,0 +1,166 @@
+import { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, useDerivedValue, withTiming } from 'react-native-reanimated';
+import React from 'react';
+import {
+  describe,
+  render,
+  expect,
+  getTestComponent,
+  test,
+  wait,
+  useTestRef,
+} from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
+import { ComparisonMode } from '../../../ReanimatedRuntimeTestsRunner/types';
+
+const COMPONENT_REF_ARRAY = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
+
+const allDerivedFunctions: Array<(x: number) => number> = [
+  x => {
+    'worklet';
+    return 2 * x + 50;
+  },
+  x => {
+    'worklet';
+    return 100 + 50 * Math.cos(x / 25);
+  },
+  x => {
+    'worklet';
+    return Math.exp(x / 30);
+  },
+  x => {
+    'worklet';
+    return Math.log(x) * 30 + 40;
+  },
+  x => {
+    'worklet';
+    return (x * x) / 200;
+  },
+  x => {
+    'worklet';
+    return Math.cbrt(x * 20000);
+  },
+  x => {
+    'worklet';
+    return 100 + (x * (1 + Math.cos(x / 5))) / 2;
+  },
+  x => {
+    'worklet';
+    return 300 - x;
+  },
+  x => {
+    'worklet';
+    return Math.ceil(x / 40) * 40;
+  },
+  x => {
+    'worklet';
+    return x * x * 0.002 + x * x * x * 0.000005;
+  },
+];
+
+const ChainComponent = () => {
+  const basicValue = useSharedValue(20);
+
+  const derivedValue0 = useDerivedValue(() => allDerivedFunctions[0](basicValue.value));
+  const derivedValue1 = useDerivedValue(() => allDerivedFunctions[1](derivedValue0.value));
+  const derivedValue2 = useDerivedValue(() => allDerivedFunctions[2](derivedValue1.value));
+  const derivedValue3 = useDerivedValue(() => allDerivedFunctions[3](derivedValue2.value));
+  const derivedValue4 = useDerivedValue(() => allDerivedFunctions[4](derivedValue3.value));
+  const derivedValue5 = useDerivedValue(() => allDerivedFunctions[5](derivedValue4.value));
+  const derivedValue6 = useDerivedValue(() => allDerivedFunctions[6](derivedValue5.value));
+  const derivedValue7 = useDerivedValue(() => allDerivedFunctions[7](derivedValue6.value));
+  const derivedValue8 = useDerivedValue(() => allDerivedFunctions[8](derivedValue7.value));
+  const derivedValue9 = useDerivedValue(() => allDerivedFunctions[9](derivedValue8.value));
+
+  const style0 = useAnimatedStyle(() => {
+    return { width: derivedValue0.value };
+  });
+  const style1 = useAnimatedStyle(() => {
+    return { width: derivedValue1.value };
+  });
+  const style2 = useAnimatedStyle(() => {
+    return { width: derivedValue2.value };
+  });
+  const style3 = useAnimatedStyle(() => {
+    return { width: derivedValue3.value };
+  });
+  const style4 = useAnimatedStyle(() => {
+    return { width: derivedValue4.value };
+  });
+  const style5 = useAnimatedStyle(() => {
+    return { width: derivedValue5.value };
+  });
+  const style6 = useAnimatedStyle(() => {
+    return { width: derivedValue6.value };
+  });
+  const style7 = useAnimatedStyle(() => {
+    return { width: derivedValue7.value };
+  });
+  const style8 = useAnimatedStyle(() => {
+    return { width: derivedValue8.value };
+  });
+  const style9 = useAnimatedStyle(() => {
+    return { width: derivedValue9.value };
+  });
+
+  useEffect(() => {
+    basicValue.value = withTiming(100, { duration: 4500 });
+  }, [basicValue]);
+
+  const componentRef0 = useTestRef(COMPONENT_REF_ARRAY[0]);
+  const componentRef1 = useTestRef(COMPONENT_REF_ARRAY[1]);
+  const componentRef2 = useTestRef(COMPONENT_REF_ARRAY[2]);
+  const componentRef3 = useTestRef(COMPONENT_REF_ARRAY[3]);
+  const componentRef4 = useTestRef(COMPONENT_REF_ARRAY[4]);
+  const componentRef5 = useTestRef(COMPONENT_REF_ARRAY[5]);
+  const componentRef6 = useTestRef(COMPONENT_REF_ARRAY[6]);
+  const componentRef7 = useTestRef(COMPONENT_REF_ARRAY[7]);
+  const componentRef8 = useTestRef(COMPONENT_REF_ARRAY[8]);
+  const componentRef9 = useTestRef(COMPONENT_REF_ARRAY[9]);
+
+  return (
+    <View style={styles.container}>
+      <Animated.View ref={componentRef0} style={[styles.animatedBox, style0]} />
+      <Animated.View ref={componentRef1} style={[styles.animatedBox, style1]} />
+      <Animated.View ref={componentRef2} style={[styles.animatedBox, style2]} />
+      <Animated.View ref={componentRef3} style={[styles.animatedBox, style3]} />
+      <Animated.View ref={componentRef4} style={[styles.animatedBox, style4]} />
+      <Animated.View ref={componentRef5} style={[styles.animatedBox, style5]} />
+      <Animated.View ref={componentRef6} style={[styles.animatedBox, style6]} />
+      <Animated.View ref={componentRef7} style={[styles.animatedBox, style7]} />
+      <Animated.View ref={componentRef8} style={[styles.animatedBox, style8]} />
+      <Animated.View ref={componentRef9} style={[styles.animatedBox, style9]} />
+    </View>
+  );
+};
+
+describe.only('Test chained useDerivedValue', () => {
+  test('Test chain of 10 components', async () => {
+    await render(<ChainComponent />);
+    await wait(5000);
+    const components = COMPONENT_REF_ARRAY.map(refString => getTestComponent(refString));
+
+    const expectedValues = Array.from(Array(10).keys()).map(idx => {
+      return allDerivedFunctions
+        .slice(0, idx + 1)
+        .reduce((accumulator, currentValue) => currentValue(accumulator), 100);
+    });
+
+    for (let i = 0; i < 10; i++) {
+      expect(await components[i].getAnimatedStyle('width')).toBe(expectedValues[i], ComparisonMode.DISTANCE);
+    }
+  });
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+  },
+  animatedBox: {
+    width: 0,
+    height: 40,
+    marginHorizontal: 30,
+    backgroundColor: 'royalblue',
+  },
+});

app/src/examples/RuntimeTests/tests/core/useSharedValue.test.tsx

@@ -11,7 +11,6 @@ import {
   getRegisteredValue,
   Presets,
   clearRenderOutput,
-  wait,
 } from '../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 import { ComparisonMode } from '../../ReanimatedRuntimeTestsRunner/types';
 
@@ -121,7 +120,7 @@ describe('Tests of sharedValue', () => {
     );
   });
 
-  describe('Tests of arrays as sharedValue', () => {
+  describe(`Tests of arrays as sharedValue, preset size: ${Presets.serializableArrays.length}`, () => {
     const AppendToArrayComponent = ({
       initialValue,
       append,
@@ -182,7 +181,6 @@ describe('Tests of sharedValue', () => {
           />,
         );
         const sharedValue = await getRegisteredValue(SHARED_VALUE_REF);
-        await wait(100); // We have to wait 100ms because of our 1000 element array, operations on it are very slow
         expect(sharedValue.onJS).toBe([...preset, 1, 'string', [], { A: 1 }], ComparisonMode.ARRAY);
         expect(sharedValue.onUI).toBe([...preset, 1, 'string', [], { A: 1 }], ComparisonMode.ARRAY);
         await render(<ProgressBar progress={index / Presets.serializableArrays.length} />);