diff --git a/packages/react-native-fantom/runner/runner.js b/packages/react-native-fantom/runner/runner.js index 776ee43957b301..eb46e4653a4cac 100644 --- a/packages/react-native-fantom/runner/runner.js +++ b/packages/react-native-fantom/runner/runner.js @@ -10,6 +10,7 @@ */ import type {TestSuiteResult} from '../runtime/setup'; +import type {ConsoleLogMessage} from './utils'; import entrypointTemplate from './entrypoint-template'; import getFantomTestConfig from './getFantomTestConfig'; @@ -22,7 +23,8 @@ import { getBuckModesForPlatform, getDebugInfoFromCommandResult, getShortHash, - runBuck2, + printConsoleLogs, + runBuck2Sync, symbolicateStackTrace, } from './utils'; import fs from 'fs'; @@ -41,31 +43,51 @@ const BUILD_OUTPUT_PATH = fs.mkdtempSync( const PRINT_FANTOM_OUTPUT: false = false; -function parseRNTesterCommandResult(result: ReturnType): { - logs: string, +function parseRNTesterCommandResult(result: ReturnType): { + logs: $ReadOnlyArray, testResult: TestSuiteResult, } { const stdout = result.stdout.toString(); - const outputArray = stdout - .trim() - .split('\n') - .filter(log => !log.startsWith('Running "')); // remove AppRegistry logs. + const logs = []; + let testResult; - // The last line should be the test output in JSON format - const testResultJSON = outputArray.pop(); + const lines = stdout + .split('\n') + .map(line => line.trim()) + .filter(Boolean); + + for (const line of lines) { + let parsed; + try { + parsed = JSON.parse(line); + } catch {} + + switch (parsed?.type) { + case 'test-result': + testResult = parsed; + break; + case 'console-log': + logs.push(parsed); + break; + default: + logs.push({ + type: 'console-log', + message: line, + level: 'info', + }); + break; + } + } - let testResult; - try { - testResult = JSON.parse(nullthrows(testResultJSON)); - } catch (error) { + if (testResult == null) { throw new Error( - 'Failed to parse test results from RN tester binary result.\n' + + 'Failed to find test results in RN tester binary output.\n' + getDebugInfoFromCommandResult(result), ); } - return {logs: outputArray.join('\n'), testResult}; + return {logs, testResult}; } function generateBytecodeBundle({ @@ -77,7 +99,7 @@ function generateBytecodeBundle({ bytecodePath: string, isOptimizedMode: boolean, }): void { - const hermesCompilerCommandResult = runBuck2( + const hermesCompilerCommandResult = runBuck2Sync( [ 'run', ...getBuckModesForPlatform(isOptimizedMode), @@ -180,7 +202,7 @@ module.exports = async function runTest( }); } - const rnTesterCommandResult = runBuck2([ + const rnTesterCommandResult = runBuck2Sync([ 'run', ...getBuckModesForPlatform( testConfig.mode === FantomTestConfigMode.Optimized, @@ -219,7 +241,7 @@ module.exports = async function runTest( const endTime = Date.now(); if (process.env.SANDCASTLE == null) { - console.log(rnTesterParsedOutput.logs); + printConsoleLogs(rnTesterParsedOutput.logs); } const testResults = diff --git a/packages/react-native-fantom/runner/utils.js b/packages/react-native-fantom/runner/utils.js index d5aa6deeac7ab3..4e426a10cdaee9 100644 --- a/packages/react-native-fantom/runner/utils.js +++ b/packages/react-native-fantom/runner/utils.js @@ -44,24 +44,17 @@ export function getBuckModesForPlatform( return ['@//xplat/mode/react-force-cxx-platform', osPlatform]; } -type SpawnResultWithOriginalCommand = { +type SyncCommandResult = { ...ReturnType, originalCommand: string, ... }; -export function runBuck2(args: Array): SpawnResultWithOriginalCommand { - // If these tests are already running from withing a buck2 process, e.g. when - // they are scheduled by a `buck2 test` wrapper, calling `buck2` again would - // cause a daemon-level deadlock. - // To prevent this - explicitly pass custom `--isolation-dir`. Reuse the same - // dir across tests (even running in different jest processes) to properly - // employ caching. - if (process.env.BUCK2_WRAPPER != null) { - args.unshift('--isolation-dir', BUCK_ISOLATION_DIR); - } - - const result = spawnSync('buck2', args, { +export function runCommandSync( + command: string, + args: Array, +): SyncCommandResult { + const result = spawnSync(command, args, { encoding: 'utf8', env: { ...process.env, @@ -71,12 +64,12 @@ export function runBuck2(args: Array): SpawnResultWithOriginalCommand { return { ...result, - originalCommand: `buck2 ${args.join(' ')}`, + originalCommand: `${command} ${args.join(' ')}`, }; } export function getDebugInfoFromCommandResult( - commandResult: SpawnResultWithOriginalCommand, + commandResult: SyncCommandResult, ): string { const maybeSignal = commandResult.signal != null ? `, signal: ${commandResult.signal}` : ''; @@ -102,6 +95,20 @@ export function getDebugInfoFromCommandResult( return logLines.join('\n'); } +export function runBuck2Sync(args: Array): SyncCommandResult { + // If these tests are already running from withing a buck2 process, e.g. when + // they are scheduled by a `buck2 test` wrapper, calling `buck2` again would + // cause a daemon-level deadlock. + // To prevent this - explicitly pass custom `--isolation-dir`. Reuse the same + // dir across tests (even running in different jest processes) to properly + // employ caching. + if (process.env.BUCK2_WRAPPER != null) { + args.unshift('--isolation-dir', BUCK_ISOLATION_DIR); + } + + return runCommandSync('buck2', args); +} + export function getShortHash(contents: string): string { return crypto.createHash('md5').update(contents).digest('hex').slice(0, 8); } @@ -134,3 +141,31 @@ export function symbolicateStackTrace( }) .join('\n'); } + +export type ConsoleLogMessage = { + type: 'console-log', + level: 'info' | 'warn' | 'error', + message: string, +}; + +export function printConsoleLogs( + logs: $ReadOnlyArray, +): void { + for (const log of logs) { + switch (log.type) { + case 'console-log': + switch (log.level) { + case 'info': + console.log(log.message); + break; + case 'warn': + console.warn(log.message); + break; + case 'error': + console.error(log.message); + break; + } + break; + } + } +} diff --git a/packages/react-native-fantom/runner/warmup/warmup.js b/packages/react-native-fantom/runner/warmup/warmup.js index a5503c154ad0de..93a918e09446e5 100644 --- a/packages/react-native-fantom/runner/warmup/warmup.js +++ b/packages/react-native-fantom/runner/warmup/warmup.js @@ -12,7 +12,7 @@ import { getBuckModesForPlatform, getDebugInfoFromCommandResult, - runBuck2, + runBuck2Sync, } from '../utils'; // $FlowExpectedError[untyped-import] import fs from 'fs'; @@ -94,7 +94,7 @@ async function warmUpMetro(isOptimizedMode: boolean): Promise { } function warmUpHermesCompiler(isOptimizedMode: boolean): void { - const buildHermesCompilerCommandResult = runBuck2([ + const buildHermesCompilerCommandResult = runBuck2Sync([ 'build', ...getBuckModesForPlatform(isOptimizedMode), '//xplat/hermes/tools/hermesc:hermesc', @@ -108,7 +108,7 @@ function warmUpHermesCompiler(isOptimizedMode: boolean): void { } function warmUpRNTesterCLI(isOptimizedMode: boolean): void { - const buildRNTesterCommandResult = runBuck2([ + const buildRNTesterCommandResult = runBuck2Sync([ 'build', ...getBuckModesForPlatform(isOptimizedMode), '//xplat/ReactNative/react-native-cxx/samples/tester:tester', diff --git a/packages/react-native-fantom/runtime/setup.js b/packages/react-native-fantom/runtime/setup.js index 31055e4a9d4a82..e7912ad65f6a42 100644 --- a/packages/react-native-fantom/runtime/setup.js +++ b/packages/react-native-fantom/runtime/setup.js @@ -11,6 +11,7 @@ import type {SnapshotConfig, TestSnapshotResults} from './snapshotContext'; +import NativeFantom from '../src/specs/NativeFantom'; import expect from './expect'; import {createMockFunction} from './mocks'; import {setupSnapshotConfig, snapshotContext} from './snapshotContext'; @@ -190,7 +191,12 @@ function executeTests() { } function reportTestSuiteResult(testSuiteResult: TestSuiteResult): void { - console.log(JSON.stringify(testSuiteResult)); + NativeFantom.reportTestSuiteResultsJSON( + JSON.stringify({ + type: 'test-result', + ...testSuiteResult, + }), + ); } global.$$RunTests$$ = () => { diff --git a/packages/react-native-fantom/src/__tests__/Fantom-itest.js b/packages/react-native-fantom/src/__tests__/Fantom-itest.js index f16d30bd10fbee..250c31d4d828fc 100644 --- a/packages/react-native-fantom/src/__tests__/Fantom-itest.js +++ b/packages/react-native-fantom/src/__tests__/Fantom-itest.js @@ -76,28 +76,30 @@ describe('Fantom', () => { // TODO: when error handling is fixed, this should verify using `toThrow` it('should throw when running a task inside another task', () => { - let lastCallbackExecuted = 0; + let threw = false; + runTask(() => { - lastCallbackExecuted = 1; - runTask(() => { - lastCallbackExecuted = 2; - throw new Error('Recursive runTask should be unreachable'); - }); + // TODO replace with expect(() => { ... }).toThrow() when error handling is fixed + try { + runTask(() => {}); + } catch { + threw = true; + } }); - expect(lastCallbackExecuted).toBe(1); + expect(threw).toBe(true); + + threw = false; runTask(() => { queueMicrotask(() => { - lastCallbackExecuted = 3; - runTask(() => { - lastCallbackExecuted = 4; - throw new Error( - 'Recursive runTask from micro-task should be unreachable', - ); - }); + try { + runTask(() => {}); + } catch { + threw = true; + } }); }); - expect(lastCallbackExecuted).toBe(3); + expect(threw).toBe(true); }); }); @@ -125,16 +127,24 @@ describe('Fantom', () => { runTask(() => { root.render( <> - - + + , ); }); expect(root.getRenderedOutput().toJSX()).toEqual( <> - - + + , ); @@ -233,18 +243,26 @@ describe('Fantom', () => { runTask(() => { root.render( <> - - hello world! - + + hello world! + , ); }); expect(root.getRenderedOutput({props: []}).toJSX()).toEqual( <> - - hello world! - + + hello world! + , ); diff --git a/packages/react-native-fantom/src/getFantomRenderedOutput.js b/packages/react-native-fantom/src/getFantomRenderedOutput.js index 496a462a3d3285..73840c844651e2 100644 --- a/packages/react-native-fantom/src/getFantomRenderedOutput.js +++ b/packages/react-native-fantom/src/getFantomRenderedOutput.js @@ -9,7 +9,7 @@ * @oncall react_native */ -import FantomModule from './specs/NativeFantomModule'; +import NativeFantom from './specs/NativeFantom'; // $FlowExpectedError[untyped-import] import micromatch from 'micromatch'; import * as React from 'react'; @@ -114,7 +114,7 @@ export default function getFantomRenderedOutput( } = config; return new FantomRenderedOutput( JSON.parse( - FantomModule.getRenderedOutput(surfaceId, { + NativeFantom.getRenderedOutput(surfaceId, { includeRoot, includeLayoutMetrics, }), @@ -152,16 +152,20 @@ function convertRawJsonToJSX( function createJSXElementForTestComparison( type: string, props: mixed, + key?: ?string, ): React.Node { const Tag = type; - return ; + return ; } function rnTypeToTestType(type: string): string { return `rn-${type.substring(0, 1).toLowerCase() + type.substring(1)}`; } -function jsonChildToJSXChild(jsonChild: FantomJsonObject | string): React.Node { +function jsonChildToJSXChild( + jsonChild: FantomJsonObject | string, + index?: ?number, +): React.Node { if (typeof jsonChild === 'string') { return jsonChild; } else { @@ -172,6 +176,7 @@ function jsonChildToJSXChild(jsonChild: FantomJsonObject | string): React.Node { jsxChildren == null ? jsonChild.props : {...jsonChild.props, children: jsxChildren}, + index != null ? String(index) : undefined, ); } } @@ -184,7 +189,7 @@ function jsonChildrenToJSXChildren(jsonChildren: FantomJsonObject['children']) { let allJSXChildrenAreStrings = true; let jsxChildrenString = ''; for (let i = 0; i < jsonChildren.length; i++) { - const jsxChild = jsonChildToJSXChild(jsonChildren[i]); + const jsxChild = jsonChildToJSXChild(jsonChildren[i], i); jsxChildren.push(jsxChild); if (allJSXChildrenAreStrings) { if (typeof jsxChild === 'string') { diff --git a/packages/react-native-fantom/src/index.js b/packages/react-native-fantom/src/index.js index b765810f66a08d..7b06e4e9a6552d 100644 --- a/packages/react-native-fantom/src/index.js +++ b/packages/react-native-fantom/src/index.js @@ -15,7 +15,7 @@ import type { import type {MixedElement} from 'react'; import getFantomRenderedOutput from './getFantomRenderedOutput'; -import FantomModule from './specs/NativeFantomModule'; +import NativeFantom from './specs/NativeFantom'; import ReactFabric from 'react-native/Libraries/Renderer/shims/ReactFabric'; let globalSurfaceIdCounter = 1; @@ -35,7 +35,7 @@ class Root { render(element: MixedElement) { if (!this.#hasRendered) { - FantomModule.startSurface(this.#surfaceId); + NativeFantom.startSurface(this.#surfaceId); this.#hasRendered = true; } @@ -43,13 +43,13 @@ class Root { } getMountingLogs(): Array { - return FantomModule.getMountingManagerLogs(this.#surfaceId); + return NativeFantom.getMountingManagerLogs(this.#surfaceId); } destroy() { // TODO: check for leaks. - FantomModule.stopSurface(this.#surfaceId); - FantomModule.flushMessageQueue(); + NativeFantom.stopSurface(this.#surfaceId); + NativeFantom.flushMessageQueue(); } getRenderedOutput(config: RenderOutputConfig = {}): FantomRenderedOutput { @@ -100,7 +100,7 @@ export function runWorkLoop(): void { try { flushingQueue = true; - FantomModule.flushMessageQueue(); + NativeFantom.flushMessageQueue(); } finally { flushingQueue = false; } diff --git a/packages/react-native-fantom/src/specs/NativeFantomModule.js b/packages/react-native-fantom/src/specs/NativeFantom.js similarity index 84% rename from packages/react-native-fantom/src/specs/NativeFantomModule.js rename to packages/react-native-fantom/src/specs/NativeFantom.js index da67f38a1e759a..3fd442e2e154a1 100644 --- a/packages/react-native-fantom/src/specs/NativeFantomModule.js +++ b/packages/react-native-fantom/src/specs/NativeFantom.js @@ -24,6 +24,9 @@ interface Spec extends TurboModule { getMountingManagerLogs: (surfaceId: number) => Array; flushMessageQueue: () => void; getRenderedOutput: (surfaceId: number, config: RenderFormatOptions) => string; + reportTestSuiteResultsJSON: (results: string) => void; } -export default TurboModuleRegistry.getEnforcing('Fantom') as Spec; +export default TurboModuleRegistry.getEnforcing( + 'NativeFantomCxx', +) as Spec; diff --git a/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-itest.js b/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-itest.js index a7ea8e84e8dd96..8ad459de8af147 100644 --- a/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-itest.js +++ b/packages/react-native/src/private/webapis/intersectionobserver/__tests__/IntersectionObserver-itest.js @@ -487,7 +487,6 @@ describe('IntersectionObserver', () => { maybeNode = receivedNode; }} /> - , , ); }); @@ -549,7 +548,6 @@ describe('IntersectionObserver', () => { maybeNode = receivedNode; }} /> - , , ); }); @@ -610,7 +608,6 @@ describe('IntersectionObserver', () => { maybeNode = receivedNode; }} /> - , , ); }); @@ -942,7 +939,6 @@ describe('IntersectionObserver', () => { maybeNode = receivedNode; }} /> - , , ); }); @@ -1003,7 +999,6 @@ describe('IntersectionObserver', () => { maybeNode = receivedNode; }} /> - , , ); }); @@ -1314,13 +1309,9 @@ describe('IntersectionObserver', () => { }); expect(node.isConnected).toBe(false); - Fantom.runTask(() => { - observer = new IntersectionObserver(() => {}); - observer.observe(node); - // TODO what happens if this throws an exception? - observer.unobserve(node); - throw new Error('unobserve should not throw'); - }); + observer = new IntersectionObserver(() => {}); + observer.observe(node); + observer.unobserve(node); }); it('should not report the initial state if the target is unobserved before it is delivered', () => { @@ -1497,19 +1488,16 @@ describe('IntersectionObserver', () => { const node = ensureReactNativeElement(maybeNode); - Fantom.runTask(() => { - observer1 = new IntersectionObserver(() => {}); - observer2 = new IntersectionObserver(() => {}); + observer1 = new IntersectionObserver(() => {}); + observer2 = new IntersectionObserver(() => {}); - observer1.observe(node); - observer2.observe(node); + observer1.observe(node); + observer2.observe(node); - observer1.unobserve(node); + observer1.unobserve(node); - // The second call shouldn't log errors (that would make the test fail). - observer2.unobserve(node); - throw new Error('unobserve should not throw'); - }); + // The second call shouldn't log errors (that would make the test fail). + observer2.unobserve(node); }); }); diff --git a/packages/react-native/src/private/webapis/mutationobserver/__tests__/MutationObserver-itest.js b/packages/react-native/src/private/webapis/mutationobserver/__tests__/MutationObserver-itest.js index 25801da127c9c2..8163f88a15a57b 100644 --- a/packages/react-native/src/private/webapis/mutationobserver/__tests__/MutationObserver-itest.js +++ b/packages/react-native/src/private/webapis/mutationobserver/__tests__/MutationObserver-itest.js @@ -383,14 +383,14 @@ describe('MutationObserver', () => { { - maybeObservedNode = ensureReactNativeElement(receivedNode); + maybeObservedNode = receivedNode; }}> , ); }); - const observedNode = nullthrows(maybeObservedNode); + const observedNode = ensureReactNativeElement(maybeObservedNode); const observerCallback = jest.fn(); const observer = new MutationObserver(observerCallback); @@ -968,13 +968,13 @@ describe('MutationObserver', () => { { - maybeObservedNode = ensureReactNativeElement(receivedNode); + maybeObservedNode = receivedNode; }} />, ); }); - const observedNode = nullthrows(maybeObservedNode); + const observedNode = ensureReactNativeElement(maybeObservedNode); const observerCallback = jest.fn(); const observer = new MutationObserver(observerCallback); @@ -1016,13 +1016,13 @@ describe('MutationObserver', () => { { - maybeObservedNode = ensureReactNativeElement(receivedNode); + maybeObservedNode = receivedNode; }} />, ); }); - const observedNode = nullthrows(maybeObservedNode); + const observedNode = ensureReactNativeElement(maybeObservedNode); const observerCallback = jest.fn(); const observer = new MutationObserver(observerCallback); @@ -1048,13 +1048,13 @@ describe('MutationObserver', () => { { - maybeObservedNode = ensureReactNativeElement(receivedNode); + maybeObservedNode = receivedNode; }} />, ); }); - const observedNode = nullthrows(maybeObservedNode); + const observedNode = ensureReactNativeElement(maybeObservedNode); Fantom.runTask(() => { root.render(<>);