Migrate rn-tester/IntegrationTests/ImageCachePolicyTest.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/ImageCachePolicyTest.js

@@ -10,10 +10,13 @@
 
 'use strict';
 
-const React = require('react');
-const ReactNative = require('react-native');
-const {Image, View, Text, StyleSheet} = ReactNative;
-const {TestModule} = ReactNative.NativeModules;
+import type {ImageURISource} from 'react-native/Libraries/Image/ImageSource';
+
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+import {Image, NativeModules, StyleSheet, Text, View} from 'react-native';
+
+const {TestModule} = NativeModules;
 
 /*
  * The reload and force-cache tests don't actually verify that the complete functionality.
@@ -27,89 +30,71 @@ const {TestModule} = ReactNative.NativeModules;
 
 const TESTS = ['only-if-cached', 'default', 'reload', 'force-cache'];
 
-type Props = {...};
-type State = {
-  'only-if-cached'?: boolean,
-  default?: boolean,
-  reload?: boolean,
-  'force-cache'?: boolean,
-  ...
-};
+function ImageCachePolicyTest(): React.Node {
+  const [state, setState] = useState({
+    'only-if-cached': undefined,
+    default: undefined,
+    reload: undefined,
+    'force-cache': undefined,
+  });
 
-class ImageCachePolicyTest extends React.Component<Props, $FlowFixMeState> {
-  state: $FlowFixMe | {...} = {};
+  const testComplete = (
+    name: $NonMaybeType<ImageURISource['cache']>,
+    pass: boolean,
+  ) => {
+    setState(prevState => ({
+      ...prevState,
+      [name]: pass,
+    }));
+  };
 
-  shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-    const results: Array<?boolean> = TESTS.map(x => nextState[x]);
+  useEffect(() => {
+    const results = TESTS.map(key => state[key]);
 
     if (!results.includes(undefined)) {
-      const result: boolean = results.reduce(
-        (x, y) => (x === y) === true,
-        true,
-      );
+      const result = results.reduce((x, y) => (x === y) === true, true);
       TestModule.markTestPassed(result);
     }
+  }, [state]);
 
-    return false;
-  }
-
-  testComplete(name: string, pass: boolean) {
-    this.setState({[name]: pass});
-  }
-
-  render(): React.Node {
-    return (
-      <View style={styles.container}>
-        <Text>Hello</Text>
-        <Image
-          source={{
-            uri:
-              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
-              Date.now(),
-            cache: 'only-if-cached',
-          }}
-          onLoad={() => this.testComplete('only-if-cached', false)}
-          onError={() => this.testComplete('only-if-cached', true)}
-          style={styles.base}
-        />
-        <Image
-          source={{
-            uri:
-              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
-              Date.now(),
-            cache: 'default',
-          }}
-          onLoad={() => this.testComplete('default', true)}
-          onError={() => this.testComplete('default', false)}
-          style={styles.base}
-        />
-        <Image
-          source={{
-            uri:
-              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
-              Date.now(),
-            cache: 'reload',
-          }}
-          onLoad={() => this.testComplete('reload', true)}
-          onError={() => this.testComplete('reload', false)}
-          style={styles.base}
-        />
-        <Image
-          source={{
-            uri:
-              'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
-              Date.now(),
-            cache: 'force-cache',
-          }}
-          onLoad={() => this.testComplete('force-cache', true)}
-          onError={() => this.testComplete('force-cache', false)}
-          style={styles.base}
-        />
-      </View>
-    );
-  }
+  return (
+    <View style={styles.container}>
+      <Text>Hello</Text>
+      <Image
+        source={getImageSource('only-if-cached')}
+        onLoad={() => testComplete('only-if-cached', false)}
+        onError={() => testComplete('only-if-cached', true)}
+        style={styles.base}
+      />
+      <Image
+        source={getImageSource('default')}
+        onLoad={() => testComplete('default', true)}
+        onError={() => testComplete('default', false)}
+        style={styles.base}
+      />
+      <Image
+        source={getImageSource('reload')}
+        onLoad={() => testComplete('reload', true)}
+        onError={() => testComplete('reload', false)}
+        style={styles.base}
+      />
+      <Image
+        source={getImageSource('force-cache')}
+        onLoad={() => testComplete('force-cache', true)}
+        onError={() => testComplete('force-cache', false)}
+        style={styles.base}
+      />
+    </View>
+  );
 }
 
+const getImageSource = (cache: ImageURISource['cache']) => ({
+  uri:
+    'https://raw.githubusercontent.com/facebook/react-native/HEAD/Libraries/NewAppScreen/components/logo.png?cacheBust=notinCache' +
+    Date.now(),
+  cache,
+});
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -120,6 +105,4 @@ const styles = StyleSheet.create({
   },
 });
 
-ImageCachePolicyTest.displayName = 'ImageCachePolicyTest';
-
-module.exports = ImageCachePolicyTest;
+export default ImageCachePolicyTest;

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;