refactor: 0.76 stable tweaks (callstack#1682)

Author: mdjastrzebski

examples/basic/components/AnimatedView.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Animated, ViewStyle } from 'react-native';
+
+type AnimatedViewProps = {
+  fadeInDuration?: number;
+  style?: ViewStyle;
+  children: React.ReactNode;
+  useNativeDriver?: boolean;
+};
+
+export function AnimatedView(props: AnimatedViewProps) {
+  const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  React.useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: props.fadeInDuration ?? 250,
+      useNativeDriver: props.useNativeDriver ?? true,
+    }).start();
+  }, [fadeAnim]);
+
+  return (
+    <Animated.View
+      style={{
+        ...props.style,
+        opacity: fadeAnim,
+      }}
+    >
+      {props.children}
+    </Animated.View>
+  );
+}

examples/basic/components/__tests__/AnimatedView.test.tsx

@@ -0,0 +1,36 @@
+import { act, render, screen } from '@testing-library/react-native';
+import { AnimatedView } from '../AnimatedView';
+
+describe('AnimatedView', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should use native driver when useNativeDriver is true', async () => {
+    render(
+      <AnimatedView fadeInDuration={250} useNativeDriver={true}>
+        Test
+      </AnimatedView>,
+    );
+    expect(screen.root).toHaveStyle({ opacity: 0 });
+
+    await act(() => jest.advanceTimersByTime(250));
+    expect(screen.root).toHaveStyle({ opacity: 1 });
+  });
+
+  it('should not use native driver when useNativeDriver is false', async () => {
+    render(
+      <AnimatedView fadeInDuration={250} useNativeDriver={false}>
+        Test
+      </AnimatedView>,
+    );
+    expect(screen.root).toHaveStyle({ opacity: 0 });
+
+    await act(() => jest.advanceTimersByTime(250));
+    expect(screen.root).toHaveStyle({ opacity: 1 });
+  });
+});

jest-setup.ts

@@ -1,4 +1,5 @@
 import { resetToDefaults } from './src/pure';
+import './src/matchers/extend-expect';
 
 beforeEach(() => {
   resetToDefaults();

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: './jest-preset',
   setupFilesAfterEnv: ['./jest-setup.ts'],
-  testPathIgnorePatterns: ['timer-utils', 'examples/', 'experiments-app/', 'experiments-rtl/'],
+  testPathIgnorePatterns: ['build/', 'examples/', 'experiments-app/', 'timer-utils'],
   testTimeout: 60000,
   transformIgnorePatterns: ['/node_modules/(?!(@react-native|react-native)/).*/'],
   snapshotSerializers: ['@relmify/jest-serializer-strip-ansi/always'],

package.json

@@ -84,7 +84,7 @@
     "jest": "^29.7.0",
     "prettier": "^2.8.8",
     "react": "18.3.1",
-    "react-native": "0.76.0-rc.6",
+    "react-native": "0.76.0",
     "react-test-renderer": "18.3.1",
     "release-it": "^17.6.0",
     "strip-ansi": "^6.0.1",

src/__tests__/fire-event.test.tsx

@@ -9,7 +9,6 @@ import {
   View,
 } from 'react-native';
 import { fireEvent, render, screen } from '..';
-import '../matchers/extend-expect';
 
 type OnPressComponentProps = {
   onPress: () => void;

src/__tests__/react-native-animated.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Animated, ViewStyle } from 'react-native';
+import { act, render, screen } from '..';
+
+type AnimatedViewProps = {
+  fadeInDuration?: number;
+  style?: ViewStyle;
+  children: React.ReactNode;
+  useNativeDriver?: boolean;
+};
+
+function AnimatedView(props: AnimatedViewProps) {
+  const fadeAnim = React.useRef(new Animated.Value(0)).current; // Initial value for opacity: 0
+
+  React.useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: props.fadeInDuration ?? 250,
+      useNativeDriver: props.useNativeDriver ?? true,
+    }).start();
+  }, [fadeAnim, props.fadeInDuration, props.useNativeDriver]);
+
+  return (
+    <Animated.View
+      style={{
+        ...props.style,
+        opacity: fadeAnim,
+      }}
+    >
+      {props.children}
+    </Animated.View>
+  );
+}
+
+describe('AnimatedView', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should use native driver when useNativeDriver is true', async () => {
+    render(
+      <AnimatedView fadeInDuration={250} useNativeDriver={true}>
+        Test
+      </AnimatedView>,
+    );
+    expect(screen.root).toHaveStyle({ opacity: 0 });
+
+    await act(() => jest.advanceTimersByTime(250));
+    expect(screen.root).toHaveStyle({ opacity: 1 });
+  });
+
+  it('should not use native driver when useNativeDriver is false', async () => {
+    render(
+      <AnimatedView fadeInDuration={250} useNativeDriver={false}>
+        Test
+      </AnimatedView>,
+    );
+    expect(screen.root).toHaveStyle({ opacity: 0 });
+
+    await act(() => jest.advanceTimersByTime(250));
+    expect(screen.root).toHaveStyle({ opacity: 1 });
+  });
+});

src/matchers/__tests__/extend-expect.test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { render, screen } from '../..';
-import '../extend-expect';
 
 test('toBeBusy() basic case', () => {
   render(

src/matchers/__tests__/to-be-busy.test.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { type AccessibilityRole, Switch, View } from 'react-native';
 import render from '../../render';
 import { screen } from '../../screen';
-import '../extend-expect';
 
 function renderViewsWithRole(role: AccessibilityRole) {
   render(