Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move render output tests to ReactNativeTester (#48140)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/48140

Changelog: [internal]

These tests test an API that's part of `ReactNativeTester` (will be renamed as `Fantom`) so it makes sense that they're in the same test file as the tests for the rest of the API.

Reviewed By: javache

Differential Revision: D66874226

fbshipit-source-id: f17e14c83cb5ca95ac619c5398c49ad84a27cfa5
This commit is contained in:
Rubén Norte
2024-12-06 05:24:31 -08:00
committed by Facebook GitHub Bot
parent b253b0fe94
commit ba8d184b77
1 changed files with 205 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-native-fantom/src/__tests__/ReactNativeTester-itest.js
Vendored
+205 -6
View File
@@ -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(
<View style={{width: 100, height: 100}} collapsable={false} />,
);
});
expect(root.getRenderedOutput().toJSX()).toEqual(
<rn-view height="100.000000" width="100.000000" />,
);
root.destroy();
});
it('default config, list of children', () => {
const root = createRoot();
runTask(() => {
root.render(
<>
<View style={{width: 100, height: 100}} collapsable={false} />
<View style={{width: 100, height: 100}} collapsable={false} />
</>,
);
});
expect(root.getRenderedOutput().toJSX()).toEqual(
<>
<rn-view width="100.000000" height="100.000000" />
<rn-view width="100.000000" height="100.000000" />
</>,
);
root.destroy();
});
it('include root', () => {
const root = createRoot();
runTask(() => {
root.render(
<View style={{width: 100, height: 100}} collapsable={false} />,
);
});
expect(root.getRenderedOutput({includeRoot: true}).toJSX()).toEqual(
<rn-rootView>
<rn-view width="100.000000" height="100.000000" />
</rn-rootView>,
);
root.destroy();
});
it('include layout metrics', () => {
const root = createRoot();
runTask(() => {
root.render(
<View style={{width: 100, height: 100}} collapsable={false} />,
);
});
expect(
root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(),
).toEqual(
<rn-view
height="100.000000"
layoutMetrics-borderWidth="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-contentInsets="{top:0,right:0,bottom:0,left:0}"
layoutMetrics-displayType="Flex"
layoutMetrics-frame="{x:0,y:0,width:100,height:100}"
layoutMetrics-layoutDirection="LeftToRight"
layoutMetrics-overflowInset="{top:0,right:-0,bottom:-0,left:0}"
layoutMetrics-pointScaleFactor="1"
width="100.000000"
/>,
);
root.destroy();
});
it('take props', () => {
const root = createRoot();
runTask(() => {
root.render(
<View style={{width: 100, height: 100}} collapsable={false} />,
);
});
expect(
root
.getRenderedOutput({
props: ['width'],
})
.toJSX(),
).toEqual(<rn-view width="100.000000" />);
root.destroy();
});
it('skip props', () => {
const root = createRoot();
runTask(() => {
root.render(
<View style={{width: 100, height: 100}} collapsable={false} />,
);
});
expect(
root
.getRenderedOutput({
props: ['!width'],
})
.toJSX(),
).toEqual(<rn-view height="100.000000" />);
root.destroy();
});
it('filter out all props', () => {
const root = createRoot();
runTask(() => {
root.render(
<>
<View style={{width: 100, height: 100}} collapsable={false} />
<Text>hello world!</Text>
<View style={{width: 200, height: 300}} collapsable={false} />
</>,
);
});
expect(root.getRenderedOutput({props: []}).toJSX()).toEqual(
<>
<rn-view />
<rn-paragraph>hello world!</rn-paragraph>
<rn-view />
</>,
);
root.destroy();
});
});
describe('toJSON', () => {
it('nested text', () => {
const root = createRoot();
runTask(() => {
root.render(
<Text>
Testing native{' '}
<Text style={{color: 'red'}}>
JSX is <Text style={{color: 'blue'}}>easy!</Text>
</Text>
</Text>,
);
});
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();
});
});
});
});