diff --git a/packages/rn-tester/IntegrationTests/GlobalEvalWithSourceUrlTest.js b/packages/rn-tester/IntegrationTests/GlobalEvalWithSourceUrlTest.js index 6b1d83ed765a..3dd3a43ca128 100644 --- a/packages/rn-tester/IntegrationTests/GlobalEvalWithSourceUrlTest.js +++ b/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 ; - } + return ; } -GlobalEvalWithSourceUrlTest.displayName = 'GlobalEvalWithSourceUrlTest'; - -module.exports = GlobalEvalWithSourceUrlTest; +export default GlobalEvalWithSourceUrlTest; diff --git a/packages/rn-tester/IntegrationTests/ImageSnapshotTest.js b/packages/rn-tester/IntegrationTests/ImageSnapshotTest.js index 62895ae33e77..fd6ff9f7fe4a 100644 --- a/packages/rn-tester/IntegrationTests/ImageSnapshotTest.js +++ b/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 ( - TestModule.verifySnapshot(this.done)} - /> - ); - } + return ( + TestModule.verifySnapshot(done)} + /> + ); } -ImageSnapshotTest.displayName = 'ImageSnapshotTest'; - -module.exports = ImageSnapshotTest; +export default ImageSnapshotTest; diff --git a/packages/rn-tester/IntegrationTests/PromiseTest.js b/packages/rn-tester/IntegrationTests/PromiseTest.js index a24963103b88..e9464d735b05 100644 --- a/packages/rn-tester/IntegrationTests/PromiseTest.js +++ b/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 = async (): Promise => { + const testShouldSucceedAsync = async () => { try { await TestModule.shouldResolve(); - this.shouldSucceedAsync = true; + shouldSucceedAsync.current = true; } catch (e) { - this.shouldSucceedAsync = false; + shouldSucceedAsync.current = false; } }; - testShouldThrowAsync: () => Promise = async (): Promise => { + 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 ; - } -} + 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 ; +} -module.exports = PromiseTest; +export default PromiseTest; diff --git a/packages/rn-tester/IntegrationTests/SyncMethodTest.js b/packages/rn-tester/IntegrationTests/SyncMethodTest.js index ab5166c057e4..1ee64ebe58ca 100644 --- a/packages/rn-tester/IntegrationTests/SyncMethodTest.js +++ b/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 ; - } + return ; } -SyncMethodTest.displayName = 'SyncMethodTest'; - -module.exports = SyncMethodTest; +export default SyncMethodTest;