Skip to content

Commit

Permalink
Make jest/renderer create helper async in prep for concurrent
Browse files Browse the repository at this point in the history 
Summary:
Use our existing abstraction around `react-test-renderer`'s `create` and make it asynchronous, to allow for wrapping `create` in `act` in a subsequent diff, and using the async API per guidance in https://react.dev/reference/react/act?#await-act-async-actfn .

Changelog: [Internal]

Differential Revision: D58647827
  • Loading branch information
@robhogan @facebook-github-bot
robhogan authored and facebook-github-bot committed Jun 16, 2024
1 parent 162955b commit 479caa5
Show file tree
Hide file tree
Showing 24 changed files with 199 additions and 190 deletions.
8 changes: 4 additions & 4 deletions packages/react-native/Libraries/Components/TextInput/__tests__/InputAccessoryView-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,19 +17,19 @@ const InputAccessoryView = require('../InputAccessoryView').default;
const React = require('react');

describe('InputAccessoryView', () => {
it('should render as <RCTInputAccessoryView> when mocked', () => {
const instance = render.create(
it('should render as <RCTInputAccessoryView> when mocked', async () => {
const instance = await render.create(
<InputAccessoryView nativeID="1">
<View />
</InputAccessoryView>,
);
expect(instance).toMatchSnapshot();
});

it('should render as <RCTInputAccessoryView> when not mocked', () => {
it('should render as <RCTInputAccessoryView> when not mocked', async () => {
jest.dontMock('../InputAccessoryView');

const instance = render.create(
const instance = await render.create(
<InputAccessoryView nativeID="1">
<View />
</InputAccessoryView>,
Expand Down
24 changes: 12 additions & 12 deletions packages/react-native/Libraries/Components/Touchable/__tests__/TouchableHighlight-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ import * as React from 'react';
const render = require('../../../../jest/renderer');

describe('TouchableHighlight', () => {
it('renders correctly', () => {
const instance = render.create(
it('renders correctly', async () => {
const instance = await render.create(
<TouchableHighlight style={{}}>
<Text>Touchable</Text>
</TouchableHighlight>,
Expand All @@ -34,29 +34,29 @@ describe('TouchableHighlight', () => {
});

describe('TouchableHighlight with disabled state', () => {
it('should be disabled when disabled is true', () => {
it('should be disabled when disabled is true', async () => {
expect(
render.create(
await render.create(
<TouchableHighlight disabled={true}>
<View />
</TouchableHighlight>,
),
).toMatchSnapshot();
});

it('should be disabled when disabled is true and accessibilityState is empty', () => {
it('should be disabled when disabled is true and accessibilityState is empty', async () => {
expect(
render.create(
await render.create(
<TouchableHighlight disabled={true} accessibilityState={{}}>
<View />
</TouchableHighlight>,
),
).toMatchSnapshot();
});

it('should keep accessibilityState when disabled is true', () => {
it('should keep accessibilityState when disabled is true', async () => {
expect(
render.create(
await render.create(
<TouchableHighlight
disabled={true}
accessibilityState={{checked: true}}>
Expand All @@ -66,9 +66,9 @@ describe('TouchableHighlight with disabled state', () => {
).toMatchSnapshot();
});

it('should overwrite accessibilityState with value of disabled prop', () => {
it('should overwrite accessibilityState with value of disabled prop', async () => {
expect(
render.create(
await render.create(
<TouchableHighlight
disabled={true}
accessibilityState={{disabled: false}}>
Expand All @@ -78,9 +78,9 @@ describe('TouchableHighlight with disabled state', () => {
).toMatchSnapshot();
});

it('should disable button when accessibilityState is disabled', () => {
it('should disable button when accessibilityState is disabled', async () => {
expect(
render.create(
await render.create(
<TouchableHighlight accessibilityState={{disabled: true}}>
<View />
</TouchableHighlight>,
Expand Down
29 changes: 14 additions & 15 deletions ...ges/react-native/Libraries/Components/Touchable/__tests__/TouchableNativeFeedback-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@ import Text from '../../../Text/Text';
import View from '../../View/View';
import TouchableNativeFeedback from '../TouchableNativeFeedback';
import * as React from 'react';
import ReactTestRenderer from 'react-test-renderer';

const render = require('../../../../jest/renderer');

describe('TouchableWithoutFeedback', () => {
it('renders correctly', () => {
const instance = render.create(
it('renders correctly', async () => {
const instance = await render.create(
<TouchableNativeFeedback style={{}}>
<Text>Touchable</Text>
</TouchableNativeFeedback>,
Expand All @@ -37,8 +36,8 @@ describe('TouchableWithoutFeedback', () => {
});

describe('<TouchableNativeFeedback />', () => {
it('should render as expected', () => {
const instance = ReactTestRenderer.create(
it('should render as expected', async () => {
const instance = await render.create(
<TouchableNativeFeedback>
<View />
</TouchableNativeFeedback>,
Expand All @@ -49,9 +48,9 @@ describe('<TouchableNativeFeedback />', () => {
});

describe('<TouchableNativeFeedback disabled={true}>', () => {
it('should be disabled when disabled is true', () => {
it('should be disabled when disabled is true', async () => {
expect(
ReactTestRenderer.create(
await render.create(
<TouchableNativeFeedback disabled={true}>
<View />
</TouchableNativeFeedback>,
Expand All @@ -61,9 +60,9 @@ describe('<TouchableNativeFeedback disabled={true}>', () => {
});

describe('<TouchableNativeFeedback disabled={true} accessibilityState={{}}>', () => {
it('should be disabled when disabled is true and accessibilityState is empty', () => {
it('should be disabled when disabled is true and accessibilityState is empty', async () => {
expect(
ReactTestRenderer.create(
await render.create(
<TouchableNativeFeedback disabled={true} accessibilityState={{}}>
<View />
</TouchableNativeFeedback>,
Expand All @@ -73,9 +72,9 @@ describe('<TouchableNativeFeedback disabled={true} accessibilityState={{}}>', ()
});

describe('<TouchableNativeFeedback disabled={true} accessibilityState={{checked: true}}>', () => {
it('should keep accessibilityState when disabled is true', () => {
it('should keep accessibilityState when disabled is true', async () => {
expect(
ReactTestRenderer.create(
await render.create(
<TouchableNativeFeedback
disabled={true}
accessibilityState={{checked: true}}>
Expand All @@ -87,9 +86,9 @@ describe('<TouchableNativeFeedback disabled={true} accessibilityState={{checked:
});

describe('<TouchableNativeFeedback disabled={true} accessibilityState={{disabled:false}}>', () => {
it('should overwrite accessibilityState with value of disabled prop', () => {
it('should overwrite accessibilityState with value of disabled prop', async () => {
expect(
ReactTestRenderer.create(
await render.create(
<TouchableNativeFeedback
disabled={true}
accessibilityState={{disabled: false}}>
Expand All @@ -101,9 +100,9 @@ describe('<TouchableNativeFeedback disabled={true} accessibilityState={{disabled
});

describe('<TouchableNativeFeedback disabled={false} accessibilityState={{disabled:true}}>', () => {
it('should overwrite accessibilityState with value of disabled prop', () => {
it('should overwrite accessibilityState with value of disabled prop', async () => {
expect(
ReactTestRenderer.create(
await render.create(
<TouchableNativeFeedback
disabled={false}
accessibilityState={{disabled: true}}>
Expand Down
16 changes: 8 additions & 8 deletions packages/react-native/Libraries/Components/View/__tests__/View-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ jest.unmock('../View');
jest.unmock('../ViewNativeComponent');

describe('View', () => {
it('default render', () => {
const instance = render.create(<View />);
it('default render', async () => {
const instance = await render.create(<View />);

expect(instance.toJSON()).toMatchInlineSnapshot(`<RCTView />`);
});
Expand All @@ -30,14 +30,14 @@ describe('View', () => {
});

describe('View compat with web', () => {
it('renders core props', () => {
it('renders core props', async () => {
const props = {
id: 'id',
tabIndex: 0,
testID: 'testID',
};

const instance = render.create(<View {...props} />);
const instance = await render.create(<View {...props} />);

expect(instance.toJSON()).toMatchInlineSnapshot(`
<RCTView
Expand All @@ -48,7 +48,7 @@ describe('View compat with web', () => {
`);
});

it('renders "aria-*" props', () => {
it('renders "aria-*" props', async () => {
const props = {
'aria-activedescendant': 'activedescendant',
'aria-atomic': true,
Expand Down Expand Up @@ -98,7 +98,7 @@ describe('View compat with web', () => {
'aria-valuetext': '3',
};

const instance = render.create(<View {...props} />);
const instance = await render.create(<View {...props} />);

expect(instance.toJSON()).toMatchInlineSnapshot(`
<RCTView
Expand Down Expand Up @@ -165,7 +165,7 @@ describe('View compat with web', () => {
`);
});

it('renders styles', () => {
it('renders styles', async () => {
const style = {
display: 'flex',
flex: 1,
Expand All @@ -174,7 +174,7 @@ describe('View compat with web', () => {
pointerEvents: 'none',
};

const instance = render.create(<View style={style} />);
const instance = await render.create(<View style={style} />);

expect(instance.toJSON()).toMatchInlineSnapshot(`
<RCTView
Expand Down
12 changes: 8 additions & 4 deletions packages/react-native/Libraries/Image/__tests__/Image-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,19 @@ const ImageInjection = require('../ImageInjection');
const React = require('react');

describe('Image', () => {
it('should render as <Image> when mocked', () => {
const instance = render.create(<Image source={{uri: 'foo-bar.jpg'}} />);
it('should render as <Image> when mocked', async () => {
const instance = await render.create(
<Image source={{uri: 'foo-bar.jpg'}} />,
);
expect(instance).toMatchSnapshot();
});

it('should render as <RCTImageView> when not mocked', () => {
it('should render as <RCTImageView> when not mocked', async () => {
jest.dontMock('../Image');

const instance = render.create(<Image source={{uri: 'foo-bar.jpg'}} />);
const instance = await render.create(
<Image source={{uri: 'foo-bar.jpg'}} />,
);
expect(instance).toMatchSnapshot();
});

Expand Down
12 changes: 6 additions & 6 deletions packages/react-native/Libraries/Image/__tests__/ImageBackground-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ const ImageBackground = require('../ImageBackground');
const React = require('react');

describe('ImageBackground', () => {
it('should render as <ImageBackground> when mocked', () => {
const instance = render.create(
it('should render as <ImageBackground> when mocked', async () => {
const instance = await render.create(
<ImageBackground
style={{width: 150, height: 50}}
source={{uri: 'foo-bar.jpg'}}
Expand All @@ -26,10 +26,10 @@ describe('ImageBackground', () => {
expect(instance).toMatchSnapshot();
});

it('should render as <RCTImageView> when not mocked', () => {
it('should render as <RCTImageView> when not mocked', async () => {
jest.dontMock('../ImageBackground');

const instance = render.create(
const instance = await render.create(
<ImageBackground
style={{width: 150, height: 50}}
source={{uri: 'foo-bar.jpg'}}
Expand All @@ -38,8 +38,8 @@ describe('ImageBackground', () => {
expect(instance).toMatchSnapshot();
});

it('should be set importantForAccessibility in <View> and <Image>', () => {
const instance = render.create(
it('should be set importantForAccessibility in <View> and <Image>', async () => {
const instance = await render.create(
<ImageBackground
importantForAccessibility={'no'}
style={{width: 150, height: 50}}
Expand Down
8 changes: 4 additions & 4 deletions packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxButton-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ jest.mock('../../../Components/Touchable/TouchableWithoutFeedback', () => ({
}));

describe('LogBoxButton', () => {
it('should render only a view without an onPress', () => {
const output = render.create(
it('should render only a view without an onPress', async () => {
const output = await render.create(
<LogBoxButton
backgroundColor={{
default: 'black',
Expand All @@ -37,8 +37,8 @@ describe('LogBoxButton', () => {
expect(output).toMatchSnapshot();
});

it('should render TouchableWithoutFeedback and pass through props', () => {
const output = render.create(
it('should render TouchableWithoutFeedback and pass through props', async () => {
const output = await render.create(
<LogBoxButton
backgroundColor={{
default: 'black',
Expand Down
12 changes: 6 additions & 6 deletions packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspector-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ const logs = [
];

describe('LogBoxContainer', () => {
it('should render null with no logs', () => {
const output = render.create(
it('should render null with no logs', async () => {
const output = await render.create(
<LogBoxInspector
onDismiss={() => {}}
onMinimize={() => {}}
Expand All @@ -82,8 +82,8 @@ describe('LogBoxContainer', () => {
expect(output).toMatchSnapshot();
});

it('should render warning with selectedIndex 0', () => {
const output = render.create(
it('should render warning with selectedIndex 0', async () => {
const output = await render.create(
<LogBoxInspector
onDismiss={() => {}}
onMinimize={() => {}}
Expand All @@ -96,8 +96,8 @@ describe('LogBoxContainer', () => {
expect(output).toMatchSnapshot();
});

it('should render fatal with selectedIndex 2', () => {
const output = render.create(
it('should render fatal with selectedIndex 2', async () => {
const output = await render.create(
<LogBoxInspector
onDismiss={() => {}}
onMinimize={() => {}}
Expand Down
14 changes: 8 additions & 6 deletions packages/react-native/Libraries/LogBox/UI/__tests__/LogBoxInspectorCodeFrame-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,14 +35,16 @@ jest.mock('../LogBoxInspectorSection', () => ({
}));

describe('LogBoxInspectorCodeFrame', () => {
it('should render null for no code frame', () => {
const output = render.create(<LogBoxInspectorCodeFrame codeFrame={null} />);
it('should render null for no code frame', async () => {
const output = await render.create(
<LogBoxInspectorCodeFrame codeFrame={null} />,
);

expect(output).toMatchSnapshot();
});

it('should render a code frame', () => {
const output = render.create(
it('should render a code frame', async () => {
const output = await render.create(
<LogBoxInspectorCodeFrame
codeFrame={{
fileName: '/path/to/RKJSModules/Apps/CrashReact/CrashReactApp.js',
Expand All @@ -59,8 +61,8 @@ describe('LogBoxInspectorCodeFrame', () => {
expect(output).toMatchSnapshot();
});

it('should render a code frame without a location', () => {
const output = render.create(
it('should render a code frame without a location', async () => {
const output = await render.create(
<LogBoxInspectorCodeFrame
codeFrame={{
fileName: '/path/to/RKJSModules/Apps/CrashReact/CrashReactApp.js',
Expand Down
Loading

0 comments on commit 479caa5

Please sign in to comment.