diff --git a/packages/react-native-fantom/src/__tests__/ReactNativeTester-itest.js b/packages/react-native-fantom/src/__tests__/ReactNativeTester-itest.js
index adaa90105ae..b9a45a5d978 100644
--- a/packages/react-native-fantom/src/__tests__/ReactNativeTester-itest.js
+++ b/packages/react-native-fantom/src/__tests__/ReactNativeTester-itest.js
@@ -10,14 +10,16 @@
*/
import 'react-native/Libraries/Core/InitializeCore';
-import * as ReactNativeTester from '..';
+import {createRoot, runTask} from '..';
+import * as React from 'react';
+import {Text, View} from 'react-native';
describe('ReactNativeTester', () => {
describe('runTask', () => {
it('should run a task synchronously', () => {
const task = jest.fn();
- ReactNativeTester.runTask(task);
+ runTask(task);
expect(task).toHaveBeenCalledTimes(1);
});
@@ -25,7 +27,7 @@ describe('ReactNativeTester', () => {
// TODO: fix error handling and make this pass
it.skip('should re-throw errors from the task synchronously', () => {
expect(() => {
- ReactNativeTester.runTask(() => {
+ runTask(() => {
throw new Error('test error');
});
}).toThrow('test error');
@@ -34,7 +36,7 @@ describe('ReactNativeTester', () => {
it('should exhaust the microtask queue synchronously', () => {
const lastMicrotask = jest.fn();
- ReactNativeTester.runTask(() => {
+ runTask(() => {
queueMicrotask(() => {
queueMicrotask(() => {
queueMicrotask(() => {
@@ -50,7 +52,7 @@ describe('ReactNativeTester', () => {
// TODO: fix error handling and make this pass
it.skip('should re-throw errors from microtasks synchronously', () => {
expect(() => {
- ReactNativeTester.runTask(() => {
+ runTask(() => {
queueMicrotask(() => {
throw new Error('test error');
});
@@ -61,7 +63,7 @@ describe('ReactNativeTester', () => {
it('should run async tasks synchronously', () => {
let completed = false;
- ReactNativeTester.runTask(async () => {
+ runTask(async () => {
await Promise.resolve(6);
completed = true;
});
@@ -69,4 +71,201 @@ describe('ReactNativeTester', () => {
expect(completed).toBe(true);
});
});
+
+ describe('getRenderedOutput', () => {
+ describe('toJSX', () => {
+ it('default config', () => {
+ const root = createRoot();
+
+ runTask(() => {
+ root.render(
+ ,
+ );
+ });
+
+ expect(root.getRenderedOutput().toJSX()).toEqual(
+ ,
+ );
+
+ root.destroy();
+ });
+
+ it('default config, list of children', () => {
+ const root = createRoot();
+
+ runTask(() => {
+ root.render(
+ <>
+
+
+ >,
+ );
+ });
+
+ expect(root.getRenderedOutput().toJSX()).toEqual(
+ <>
+
+
+ >,
+ );
+
+ root.destroy();
+ });
+
+ it('include root', () => {
+ const root = createRoot();
+
+ runTask(() => {
+ root.render(
+ ,
+ );
+ });
+
+ expect(root.getRenderedOutput({includeRoot: true}).toJSX()).toEqual(
+
+
+ ,
+ );
+
+ root.destroy();
+ });
+
+ it('include layout metrics', () => {
+ const root = createRoot();
+
+ runTask(() => {
+ root.render(
+ ,
+ );
+ });
+
+ expect(
+ root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
+ ).toEqual(
+ ,
+ );
+
+ root.destroy();
+ });
+
+ it('take props', () => {
+ const root = createRoot();
+
+ runTask(() => {
+ root.render(
+ ,
+ );
+ });
+
+ expect(
+ root
+ .getRenderedOutput({
+ props: ['width'],
+ })
+ .toJSX(),
+ ).toEqual();
+
+ root.destroy();
+ });
+
+ it('skip props', () => {
+ const root = createRoot();
+
+ runTask(() => {
+ root.render(
+ ,
+ );
+ });
+
+ expect(
+ root
+ .getRenderedOutput({
+ props: ['!width'],
+ })
+ .toJSX(),
+ ).toEqual();
+
+ root.destroy();
+ });
+
+ it('filter out all props', () => {
+ const root = createRoot();
+
+ runTask(() => {
+ root.render(
+ <>
+
+ hello world!
+
+ >,
+ );
+ });
+
+ expect(root.getRenderedOutput({props: []}).toJSX()).toEqual(
+ <>
+
+ hello world!
+
+ >,
+ );
+
+ root.destroy();
+ });
+ });
+
+ describe('toJSON', () => {
+ it('nested text', () => {
+ const root = createRoot();
+
+ runTask(() => {
+ root.render(
+
+ Testing native{' '}
+
+ JSX is easy!
+
+ ,
+ );
+ });
+
+ expect(
+ root.getRenderedOutput({props: ['foreground*']}).toJSON(),
+ ).toEqual({
+ children: [
+ 'Testing native ',
+ {
+ children: 'JSX is ',
+ props: {
+ foregroundColor: 'rgba(255, 0, 0, 255)',
+ },
+ type: 'Text',
+ },
+ {
+ children: 'easy!',
+ props: {
+ foregroundColor: 'rgba(0, 0, 255, 255)',
+ },
+ type: 'Text',
+ },
+ ],
+ props: {
+ foregroundColor: 'rgba(255, 255, 255, 127)',
+ },
+ type: 'Paragraph',
+ });
+
+ root.destroy();
+ });
+ });
+ });
});