Skip to content

Commit 12b4f76

Browse files
mdjastrzebskimdjastrzebski
committed
refactor: cleanup renderer code
1 parent 95030fb commit 12b4f76

File tree

8 files changed

+29
-52
lines changed

8 files changed

+29
-52
lines changed

‎src/__tests__/act.test.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { Text } from 'react-native';
33
import { act, fireEvent, render, screen } from '../';
4+
import '../matchers/extend-expect';
45

56
type UseEffectProps = { callback(): void };
67
const UseEffect = ({ callback }: UseEffectProps) => {
@@ -34,9 +35,9 @@ test('fireEvent should trigger useState', () => {
3435
render(<Counter />);
3536
const counter = screen.getByText(/Total count/i);
3637

37-
expect(counter.props.children).toEqual('Total count: 0');
38+
expect(counter).toHaveTextContent('Total count: 0');
3839
fireEvent.press(counter);
39-
expect(counter.props.children).toEqual('Total count: 1');
40+
expect(counter).toHaveTextContent('Total count: 1');
4041
});
4142

4243
test('should be able to not await act', () => {

‎src/__tests__/wait-for.test.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { Text, TouchableOpacity, View, Pressable } from 'react-native';
33
import { fireEvent, render, waitFor, configure, screen } from '..';
4+
import '../matchers/extend-expect';
45

56
class Banana extends React.Component<any> {
67
changeFresh = () => {
@@ -45,7 +46,7 @@ test('waits for element until it stops throwing', async () => {
4546

4647
const freshBananaText = await waitFor(() => screen.getByText('Fresh'));
4748

48-
expect(freshBananaText.props.children).toBe('Fresh');
49+
expect(freshBananaText).toHaveTextContent('Fresh');
4950
});
5051

5152
test('waits for element until timeout is met', async () => {
@@ -145,7 +146,7 @@ test.each([false, true])(
145146
jest.advanceTimersByTime(300);
146147
const freshBananaText = await waitFor(() => screen.getByText('Fresh'));
147148

148-
expect(freshBananaText.props.children).toBe('Fresh');
149+
expect(freshBananaText).toHaveTextContent('Fresh');
149150
},
150151
);
151152

‎src/matchers/utils.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import redent from 'redent';
1111
import { isValidElement } from '../helpers/component-tree';
1212
import { defaultMapProps } from '../helpers/format-default';
1313
import { HostElement, HostNode } from '../renderer/host-element';
14+
import { getTextContent } from '../helpers/text-content';
1415

1516
class HostElementTypeError extends Error {
1617
constructor(received: unknown, matcherFn: jest.CustomMatcher, context: jest.MatcherContext) {
@@ -72,6 +73,8 @@ export function formatElement(element: HostNode | null) {
7273
const { children, ...props } = element.props;
7374
const childrenToDisplay = typeof children === 'string' ? [children] : undefined;
7475

76+
const textContent = getTextContent(element);
77+
7578
return redent(
7679
prettyFormat(
7780
{
@@ -80,7 +83,7 @@ export function formatElement(element: HostNode | null) {
8083
$$typeof: Symbol.for('react.test.json'),
8184
type: element.type,
8285
props: defaultMapProps(props),
83-
children: childrenToDisplay,
86+
children: element.children.filter((child) => typeof child === 'string'),
8487
},
8588
{
8689
plugins: [plugins.ReactTestComponent, plugins.ReactElement],

‎src/queries/__tests__/test-id.test.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { Button, Text, TextInput, View } from 'react-native';
33
import { render, screen } from '../..';
4+
import '../../matchers/extend-expect';
45

56
const PLACEHOLDER_FRESHNESS = 'Add custom freshness';
67
const PLACEHOLDER_CHEF = 'Who inspected freshness?';
@@ -74,7 +75,7 @@ test('getByTestId, queryByTestId', () => {
7475
render(<Banana />);
7576
const component = screen.getByTestId('bananaFresh');
7677

77-
expect(component.props.children).toBe('not fresh');
78+
expect(component).toHaveTextContent('not fresh');
7879
expect(() => screen.getByTestId('InExistent')).toThrow(
7980
'Unable to find an element with testID: InExistent',
8081
);
@@ -95,8 +96,8 @@ test('getAllByTestId, queryAllByTestId', () => {
9596
const textElements = screen.getAllByTestId('duplicateText');
9697

9798
expect(textElements.length).toBe(2);
98-
expect(textElements[0].props.children).toBe('First Text');
99-
expect(textElements[1].props.children).toBe('Second Text');
99+
expect(textElements[0]).toHaveTextContent('First Text');
100+
expect(textElements[1]).toHaveTextContent('Second Text');
100101
expect(() => screen.getAllByTestId('nonExistentTestId')).toThrow(
101102
'Unable to find an element with testID: nonExistentTestId',
102103
);

‎src/queries/__tests__/text.test.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { Button, Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
33
import { getDefaultNormalizer, render, screen, within } from '../..';
4+
import '../../matchers/extend-expect';
45

56
test('byText matches simple text', () => {
67
render(<Text testID="text">Hello World</Text>);
@@ -56,11 +57,11 @@ test('getByText, queryByText', () => {
5657
render(<Banana />);
5758
const button = screen.getByText(/change/i);
5859

59-
expect(button.props.children).toBe('Change freshness!');
60+
expect(button).toHaveTextContent('Change freshness!');
6061

6162
const sameButton = screen.getByText('not fresh');
6263

63-
expect(sameButton.props.children).toBe('not fresh');
64+
expect(sameButton).toHaveTextContent('not fresh');
6465
expect(() => screen.getByText('InExistent')).toThrow(
6566
'Unable to find an element with text: InExistent',
6667
);
@@ -90,7 +91,7 @@ test('getByText, screen.queryByText with children as Array', () => {
9091
render(<BananaStore />);
9192

9293
const threeBananaBunch = screen.getByText('There are 3 bananas in the bunch');
93-
expect(threeBananaBunch.props.children).toEqual(['There are ', 3, ' bananas in the bunch']);
94+
expect(threeBananaBunch).toHaveTextContent('There are 3 bananas in the bunch');
9495
});
9596

9697
test('getAllByText, queryAllByText', () => {

‎src/renderer/host-element.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ export class HostElement {
2525
return {};
2626
}
2727

28-
// // eslint-disable-next-line @typescript-eslint/no-unused-vars
29-
// const { children, ...restProps } = this.instance.props;
30-
return this.instance.props;
28+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
29+
const { children, ...restProps } = this.instance.props;
30+
return restProps;
3131
}
3232

3333
get children(): HostNode[] {

‎src/renderer/reconciler.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,6 @@ const hostConfig = {
105105
_hostContext: HostContext,
106106
internalHandle: OpaqueHandle,
107107
): Instance {
108-
//console.log('🔷 createInstance', type, props);
109-
// console.log('- RootContainer:', rootContainer);
110-
// console.log('- HostContext:', _hostContext);
111-
// console.log('- InternalHandle:', internalHandle);
112108
return {
113109
tag: 'INSTANCE',
114110
type,
@@ -162,8 +158,6 @@ const hostConfig = {
162158
_rootContainer: Container,
163159
_hostContext: HostContext,
164160
): boolean {
165-
// console.log('🔷 finalizeInitialChildren', type, props);
166-
// console.log('🔷 - instance:', instance);
167161
return false;
168162
},
169163

@@ -182,8 +176,6 @@ const hostConfig = {
182176
_rootContainer: Container,
183177
_hostContext: HostContext,
184178
): UpdatePayload | null {
185-
// console.log('🔷 prepareUpdate', type, newProps, oldProps);
186-
// console.log('🔷 - instance:', instance);
187179
return UPDATE_SIGNAL;
188180
},
189181

@@ -198,7 +190,6 @@ const hostConfig = {
198190
*/
199191
shouldSetTextContent(_type: Type, _props: Props): boolean {
200192
// TODO: what should RN do here?
201-
//console.log('🔷 shouldSetTextContent', type, props);
202193
return false;
203194
},
204195

@@ -452,8 +443,6 @@ const hostConfig = {
452443
_props: Props,
453444
_internalHandle: OpaqueHandle,
454445
): void {
455-
// console.log('🔷 commitMount', type, props);
456-
// console.log('🔷 - instance:', instance);
457446
// noop
458447
},
459448

@@ -470,8 +459,6 @@ const hostConfig = {
470459
nextProps: Props,
471460
internalHandle: OpaqueHandle,
472461
): void {
473-
// console.log('🔷 commitMount', type, nextProps, _prevProps);
474-
// console.log('🔷 - instance:', instance);
475462
instance.type = type;
476463
instance.props = nextProps;
477464
instance.internalHandle = internalHandle;

‎src/renderer/renderer.ts‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -26,45 +26,26 @@ export function render(element: ReactElement): RenderResult {
2626
false, // isStrictMode
2727
null, // concurrentUpdatesByDefaultOverride
2828
'id', // identifierPrefix
29-
(_error) => {
30-
// eslint-disable-next-line no-console
31-
console.log('Recoverable Error', _error);
32-
}, // onRecoverableError
29+
(_error) => {}, // onRecoverableError
3330
null, // transitionCallbacks
3431
);
3532

36-
TestReconciler.updateContainer(element, containerFiber, null, () => {
37-
// eslint-disable-next-line no-console
38-
//console.log('Rendered', container?.children);
39-
});
40-
41-
// update(newElement: React$Element<any>) {
42-
// if (root == null || root.current == null) {
43-
// return;
44-
// }
45-
// ReactReconciler.updateContainer(newElement, root, null, null);
46-
// },
33+
TestReconciler.updateContainer(element, containerFiber, null, null);
4734

4835
const update = (element: ReactElement) => {
4936
if (containerFiber == null || container == null) {
5037
return;
5138
}
5239

53-
TestReconciler.updateContainer(element, containerFiber, null, () => {
54-
// eslint-disable-next-line no-console
55-
//console.log('Updated', container?.children);
56-
});
40+
TestReconciler.updateContainer(element, containerFiber, null, null);
5741
};
5842

5943
const unmount = () => {
6044
if (containerFiber == null || container == null) {
6145
return;
6246
}
6347

64-
TestReconciler.updateContainer(null, containerFiber, null, () => {
65-
// eslint-disable-next-line no-console
66-
//console.log('Unmounted', container?.children);
67-
});
48+
TestReconciler.updateContainer(null, containerFiber, null, null);
6849

6950
container = null;
7051
containerFiber = null;
@@ -79,14 +60,16 @@ export function render(element: ReactElement): RenderResult {
7960
return renderToJson(container.children[0]);
8061
}
8162

63+
// Taken from React Test Renderer
8264
// TODO: When could that happen?
8365
if (
8466
container.children.length === 2 &&
8567
container.children[0].isHidden === true &&
8668
container.children[1].isHidden === false
8769
) {
88-
// Omit timed out children from output entirely, including the fact that we
89-
// temporarily wrap fallback and timed out children in an array.
70+
// Taken from React Test Renderer
71+
// > Omit timed out children from output entirely, including the fact that we
72+
// > temporarily wrap fallback and timed out children in an array.
9073
return renderToJson(container.children[1]);
9174
}
9275

0 commit comments

Comments
 (0)