refactor: 0.76 stable tweaks (#1682)

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__/to-be-busy.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-checked.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(

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

@@ -11,7 +11,6 @@ import {
   View,
 } from 'react-native';
 import { render, screen } from '../..';
-import '../extend-expect';
 
 test('toBeDisabled()/toBeEnabled() supports basic case', () => {
   render(

src/matchers/__tests__/to-be-empty-element.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
 import { render, screen } from '../..';
-import '../extend-expect';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DoNotRenderChildren({ children }: { children: React.ReactNode }) {

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

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

src/matchers/__tests__/to-be-on-the-screen.test.tsx

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

src/matchers/__tests__/to-be-partially-checked.test.tsx

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

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

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

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View, Modal } from 'react-native';
 import { render, screen } from '../..';
-import '../extend-expect';
 
 test('toBeVisible() on empty view', () => {
   render(<View testID="view" />);

src/matchers/__tests__/to-contain-element.test.tsx

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

src/matchers/__tests__/to-have-accessibility-value.test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { render, screen } from '../..';
-import '../extend-expect';
 
 describe('toHaveAccessibilityValue', () => {
   it('supports "accessibilityValue.min"', () => {

src/matchers/__tests__/to-have-accessible-name.test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View, Text, TextInput, Image } from 'react-native';
 import { render, screen } from '../..';
-import '../extend-expect';
 
 test('toHaveAccessibleName() handles view with "accessibilityLabel" prop', () => {
   render(<View testID="view" accessibilityLabel="Test label" />);

src/matchers/__tests__/to-have-display-value.test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { TextInput, View } from 'react-native';
 import { render, screen } from '../..';
-import '../extend-expect';
 
 test('toHaveDisplayValue() example test', () => {
   render(<TextInput testID="text-input" value="test" />);

src/matchers/__tests__/to-have-prop.test.tsx

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

src/matchers/__tests__/to-have-style.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import { render, screen } from '../..';
-import '../extend-expect';
 
 const styles = StyleSheet.create({
   container: { borderBottomColor: 'white' },

src/matchers/__tests__/to-have-text-content.test.tsx

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

src/user-event/__tests__/clear.test.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { TextInput, TextInputProps, View } from 'react-native';
 import { createEventLogger, getEventsNames } from '../../test-utils';
 import { render, userEvent, screen } from '../..';
-import '../../matchers/extend-expect';
 
 beforeEach(() => {
   jest.useRealTimers();

src/user-event/__tests__/paste.test.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { TextInput, TextInputProps, View } from 'react-native';
 import { createEventLogger, getEventsNames } from '../../test-utils';
 import { render, userEvent, screen } from '../..';
-import '../../matchers/extend-expect';
 
 beforeEach(() => {
   jest.useRealTimers();

src/user-event/scroll/__tests__/scroll-to-flat-list.test.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { FlatList, ScrollViewProps, Text, View } from 'react-native';
 import { render, screen } from '../../..';
-import '../../../matchers/extend-expect';
 import { EventEntry, createEventLogger } from '../../../test-utils';
 import { userEvent } from '../..';
 

src/user-event/type/__tests__/type.test.tsx

@@ -3,7 +3,6 @@ import { TextInput, TextInputProps, View } from 'react-native';
 import { createEventLogger, getEventsNames, lastEventPayload } from '../../../test-utils';
 import { render, screen } from '../../..';
 import { userEvent } from '../..';
-import '../../../matchers/extend-expect';
 
 beforeEach(() => {
   jest.useRealTimers();