Migrate rn-tester/IntegrationTests/AppEventsTest.js to function components

packages/rn-tester/IntegrationTests/AppEventsTest.js

@@ -10,62 +10,77 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const deepDiffer = require('react-native/Libraries/Utilities/differ/deepDiffer');
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import {
+  NativeAppEventEmitter,
+  NativeModules,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import deepDiffer from 'react-native/Libraries/Utilities/differ/deepDiffer';
 
-const {NativeAppEventEmitter, StyleSheet, Text, View} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+const {TestModule} = NativeModules;
 
 const TEST_PAYLOAD = {foo: 'bar'};
 
 type AppEvent = {
   data: Object,
   ts: number,
-  ...
 };
+
 type State = {
   sent: 'none' | AppEvent,
   received: 'none' | AppEvent,
   elapsed?: string,
-  ...
 };
 
-class AppEventsTest extends React.Component<{...}, State> {
-  state: State = {sent: 'none', received: 'none'};
+function AppEventsTest(): React.Node {
+  const [state, setState] = useState<State>({
+    sent: 'none',
+    received: 'none',
+  });
+
+  useEffect(() => {
+    const receiveEvent = (event: any) => {
+      if (deepDiffer(event.data, TEST_PAYLOAD)) {
+        throw new Error('Received wrong event: ' + JSON.stringify(event));
+      }
+      const elapsed = Date.now() - event.ts + 'ms';
+      setState(prevState => ({
+        ...prevState,
+        received: event,
+        elapsed,
+      }));
+      TestModule.markTestCompleted();
+    };
+
+    const listener = NativeAppEventEmitter.addListener(
+      'testEvent',
+      receiveEvent,
+    );
 
-  componentDidMount() {
-    NativeAppEventEmitter.addListener('testEvent', this.receiveEvent);
     const event = {data: TEST_PAYLOAD, ts: Date.now()};
     TestModule.sendAppEvent('testEvent', event);
-    this.setState({sent: event});
-  }
+    setState(prevState => ({...prevState, sent: event}));
 
-  receiveEvent: (event: any) => void = (event: any) => {
-    if (deepDiffer(event.data, TEST_PAYLOAD)) {
-      throw new Error('Received wrong event: ' + JSON.stringify(event));
-    }
-    const elapsed = Date.now() - event.ts + 'ms';
-    this.setState({received: event, elapsed}, () => {
-      TestModule.markTestCompleted();
-    });
-  };
+    return () => {
+      listener.remove();
+    };
+  }, []);
 
-  render(): React.Node {
-    return (
-      <View style={styles.container}>
-        <Text>{JSON.stringify(this.state, null, '  ')}</Text>
-      </View>
-    );
-  }
+  return (
+    <View style={styles.container}>
+      <Text>{JSON.stringify(state, null, '  ')}</Text>
+    </View>
+  );
 }
 
-AppEventsTest.displayName = 'AppEventsTest';
-
 const styles = StyleSheet.create({
   container: {
     margin: 40,
   },
 });
 
-module.exports = AppEventsTest;
+export default AppEventsTest;

packages/rn-tester/IntegrationTests/GlobalEvalWithSourceUrlTest.js

@@ -12,15 +12,15 @@
 
 import type {ExtendedError} from 'react-native/Libraries/Core/ExtendedError';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const parseErrorStack = require('react-native/Libraries/Core/Devtools/parseErrorStack');
-const {View} = ReactNative;
+import * as React from 'react';
+import {useEffect} from 'react';
+import {NativeModules, View} from 'react-native';
+import parseErrorStack from 'react-native/Libraries/Core/Devtools/parseErrorStack';
 
-const {TestModule} = ReactNative.NativeModules;
+const {TestModule} = NativeModules;
 
-class GlobalEvalWithSourceUrlTest extends React.Component<{...}> {
-  componentDidMount(): void {
+function GlobalEvalWithSourceUrlTest(): React.Node {
+  useEffect(() => {
     if (typeof global.globalEvalWithSourceUrl !== 'function') {
       throw new Error(
         'Expected to find globalEvalWithSourceUrl function on global object but found ' +
@@ -75,13 +75,9 @@ class GlobalEvalWithSourceUrlTest extends React.Component<{...}> {
       );
     }
     TestModule.markTestCompleted();
-  }
+  }, []);
 
-  render(): React.Node {
-    return <View />;
-  }
+  return <View />;
 }
 
-GlobalEvalWithSourceUrlTest.displayName = 'GlobalEvalWithSourceUrlTest';
-
-module.exports = GlobalEvalWithSourceUrlTest;
+export default GlobalEvalWithSourceUrlTest;

packages/rn-tester/IntegrationTests/ImageSnapshotTest.js

@@ -10,33 +10,30 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {Image} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+import * as React from 'react';
+import {useEffect} from 'react';
+import {Image, NativeModules} from 'react-native';
 
-class ImageSnapshotTest extends React.Component<{...}> {
-  componentDidMount(): void {
+const {TestModule} = NativeModules;
+
+function ImageSnapshotTest(): React.Node {
+  useEffect(() => {
     if (!TestModule.verifySnapshot) {
       throw new Error('TestModule.verifySnapshot not defined.');
     }
-  }
+  }, []);
 
-  done: (success: boolean) => void = (success: boolean) => {
+  const done = (success: boolean) => {
     TestModule.markTestPassed(success);
   };
 
-  render(): React.Node {
-    return (
-      <Image
-        source={require('./blue_square.png')}
-        defaultSource={require('./red_square.png')}
-        onLoad={() => TestModule.verifySnapshot(this.done)}
-      />
-    );
-  }
+  return (
+    <Image
+      source={require('./blue_square.png')}
+      defaultSource={require('./red_square.png')}
+      onLoad={() => TestModule.verifySnapshot(done)}
+    />
+  );
 }
 
-ImageSnapshotTest.displayName = 'ImageSnapshotTest';
-
-module.exports = ImageSnapshotTest;
+export default ImageSnapshotTest;

packages/rn-tester/IntegrationTests/PromiseTest.js

@@ -10,69 +10,77 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {View} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+import * as React from 'react';
+import {useEffect, useRef} from 'react';
+import {NativeModules, View} from 'react-native';
 
-class PromiseTest extends React.Component<{...}> {
-  shouldResolve: boolean = false;
-  shouldReject: boolean = false;
-  shouldSucceedAsync: boolean = false;
-  shouldThrowAsync: boolean = false;
+const {TestModule} = NativeModules;
 
-  componentDidMount() {
-    // $FlowFixMe[unused-promise]
-    Promise.all([
-      this.testShouldResolve(),
-      this.testShouldReject(),
-      this.testShouldSucceedAsync(),
-      this.testShouldThrowAsync(),
-    ]).then(() =>
-      TestModule.markTestPassed(
-        this.shouldResolve &&
-          this.shouldReject &&
-          this.shouldSucceedAsync &&
-          this.shouldThrowAsync,
-      ),
-    );
-  }
+function PromiseTest(): React.Node {
+  const shouldResolve = useRef(false);
+  const shouldReject = useRef(false);
+  const shouldSucceedAsync = useRef(false);
+  const shouldThrowAsync = useRef(false);
 
-  testShouldResolve: () => any = () => {
+  const testShouldResolve = () => {
     return TestModule.shouldResolve()
-      .then(() => (this.shouldResolve = true))
-      .catch(() => (this.shouldResolve = false));
+      .then(() => {
+        shouldResolve.current = true;
+      })
+      .catch(() => {
+        shouldResolve.current = false;
+      });
   };
 
-  testShouldReject: () => any = () => {
+  const testShouldReject = () => {
     return TestModule.shouldReject()
-      .then(() => (this.shouldReject = false))
-      .catch(() => (this.shouldReject = true));
+      .then(() => {
+        shouldReject.current = false;
+      })
+      .catch(() => {
+        shouldReject.current = true;
+      });
   };
 
-  testShouldSucceedAsync: () => Promise<any> = async (): Promise<any> => {
+  const testShouldSucceedAsync = async () => {
     try {
       await TestModule.shouldResolve();
-      this.shouldSucceedAsync = true;
+      shouldSucceedAsync.current = true;
     } catch (e) {
-      this.shouldSucceedAsync = false;
+      shouldSucceedAsync.current = false;
     }
   };
 
-  testShouldThrowAsync: () => Promise<any> = async (): Promise<any> => {
+  const testShouldThrowAsync = async () => {
     try {
       await TestModule.shouldReject();
-      this.shouldThrowAsync = false;
+      shouldThrowAsync.current = false;
     } catch (e) {
-      this.shouldThrowAsync = true;
+      shouldThrowAsync.current = true;
     }
   };
 
-  render(): React.Node {
-    return <View />;
-  }
-}
+  useEffect(() => {
+    async function runTests() {
+      await Promise.all([
+        testShouldResolve(),
+        testShouldReject(),
+        testShouldSucceedAsync(),
+        testShouldThrowAsync(),
+      ]);
 
-PromiseTest.displayName = 'PromiseTest';
+      TestModule.markTestPassed(
+        shouldResolve.current &&
+          shouldReject.current &&
+          shouldSucceedAsync.current &&
+          shouldThrowAsync.current,
+      );
+    }
+
+    runTests().catch(console.error);
+  }, []);
+
+  return <View />;
+}
 
-module.exports = PromiseTest;
+export default PromiseTest;

packages/rn-tester/IntegrationTests/SyncMethodTest.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {View} = ReactNative;
+import * as React from 'react';
+import {useEffect} from 'react';
+import {NativeModules, View} from 'react-native';
 
-const {TestModule, RNTesterTestModule} = ReactNative.NativeModules;
+const {TestModule, RNTesterTestModule} = NativeModules;
 
-class SyncMethodTest extends React.Component<{...}> {
-  componentDidMount(): void {
+function SyncMethodTest(): React.Node {
+  useEffect(() => {
     if (
       RNTesterTestModule.echoString('test string value') !== 'test string value'
     ) {
@@ -41,13 +41,9 @@ class SyncMethodTest extends React.Component<{...}> {
         );
       }
     });
-  }
+  }, []);
 
-  render(): React.Node {
-    return <View />;
-  }
+  return <View />;
 }
 
-SyncMethodTest.displayName = 'SyncMethodTest';
-
-module.exports = SyncMethodTest;
+export default SyncMethodTest;