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

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;