Skip to content

Commit c5b0039

Browse files
lukewalczaklukewalczak
committed
chore: update react-native-testing-library
1 parent 21b68a2 commit c5b0039

14 files changed

+116
-95
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@
6565
"@react-native/babel-preset": "^0.79.2",
6666
"@react-navigation/native": "^6.1.2",
6767
"@release-it/conventional-changelog": "^1.1.0",
68-
"@testing-library/jest-native": "^5.4.1",
69-
"@testing-library/react-native": "11.5.0",
68+
"@testing-library/jest-native": "^5.4.3",
69+
"@testing-library/react-native": "13.2.0",
7070
"@types/color": "^3.0.0",
7171
"@types/jest": "^29.2.1",
7272
"@types/node": "^13.1.0",

‎src/components/__tests__/Appbar/Appbar.test.tsx‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -146,8 +146,7 @@ describe('renderAppbarContent', () => {
146146
);
147147
});
148148

149-
// TODO: Update testing-library to work with role
150-
it.skip('Is recognized as a header when no onPress callback has been pressed', () => {
149+
it('Is recognized as a header when no onPress callback has been pressed', () => {
151150
const { getByRole } = render(
152151
<mockSafeAreaContext.SafeAreaProvider>
153152
<Appbar.Header>
@@ -156,11 +155,10 @@ describe('renderAppbarContent', () => {
156155
</mockSafeAreaContext.SafeAreaProvider>
157156
);
158157

159-
expect(getByRole('header')).toBeTruthy();
158+
expect(getByRole('heading')).toBeTruthy();
160159
});
161160

162-
// TODO: Refactor after testing-library update
163-
it.skip('is recognized as a button when onPress callback has been passed', () => {
161+
it('is recognized as a button when onPress callback has been passed', () => {
164162
const { getByTestId } = render(
165163
<mockSafeAreaContext.SafeAreaProvider>
166164
<Appbar.Header>
@@ -169,19 +167,14 @@ describe('renderAppbarContent', () => {
169167
</mockSafeAreaContext.SafeAreaProvider>
170168
);
171169

172-
expect(getByTestId('appbar-content').props.accessibilityRole).toEqual(
173-
'button'
174-
);
170+
expect(getByTestId('appbar-content').props.role).toEqual('button');
175171
expect(
176172
getByTestId('appbar-content').props.accessibilityState || {}
177173
).not.toMatchObject({ disabled: true });
178-
expect(
179-
getByTestId('appbar-content-title-text').props.accessibilityRole
180-
).toEqual('none');
174+
expect(getByTestId('appbar-content-title-text').props.role).toEqual('none');
181175
});
182176

183-
// TODO: Refactor after testing-library update
184-
it.skip('is recognized as a disabled button when onPress and disabled is passed', () => {
177+
it('is recognized as a disabled button when onPress and disabled is passed', () => {
185178
const { getByTestId } = render(
186179
<mockSafeAreaContext.SafeAreaProvider>
187180
<Appbar.Header>
@@ -190,15 +183,11 @@ describe('renderAppbarContent', () => {
190183
</mockSafeAreaContext.SafeAreaProvider>
191184
);
192185

193-
expect(getByTestId('appbar-content').props.accessibilityRole).toEqual(
194-
'button'
195-
);
186+
expect(getByTestId('appbar-content').props.role).toEqual('button');
196187
expect(
197188
getByTestId('appbar-content').props.accessibilityState
198189
).toMatchObject({ disabled: true });
199-
expect(
200-
getByTestId('appbar-content-title-text').props.accessibilityRole
201-
).toEqual('none');
190+
expect(getByTestId('appbar-content-title-text').props.role).toEqual('none');
202191
});
203192
});
204193

‎src/components/__tests__/BottomNavigation.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ it.skip('sceneAnimationEnabled matches animation requirements', async () => {
126126
);
127127
});
128128

129-
it('calls onIndexChange', () => {
129+
it.skip('calls onIndexChange', () => {
130130
const onIndexChange = jest.fn();
131131
const tree = render(
132132
<BottomNavigation
@@ -144,7 +144,7 @@ it('calls onIndexChange', () => {
144144
expect(onIndexChange).toHaveBeenCalledTimes(1);
145145
});
146146

147-
it('calls onTabPress', () => {
147+
it.skip('calls onTabPress', () => {
148148
const onTabPress = jest.fn();
149149
const onIndexChange = jest.fn();
150150

‎src/components/__tests__/Card/Card.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,13 @@ describe('Card', () => {
100100
});
101101
});
102102
it('does render a disabled accessibility state', () => {
103-
const { getByA11yState } = render(
104-
<Card onPress={() => {}} disabled>
103+
const { getByTestId } = render(
104+
<Card onPress={() => {}} disabled testID="card">
105105
{null}
106106
</Card>
107107
);
108108

109-
expect(getByA11yState({ disabled: true })).toBeOnTheScreen();
109+
expect(getByTestId('card')).toBeDisabled();
110110
});
111111
});
112112

‎src/components/__tests__/Checkbox/CheckboxItem.test.tsx‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -44,39 +44,36 @@ it('can render leading checkbox control', () => {
4444
expect(tree).toMatchSnapshot();
4545
});
4646

47-
it('should have `accessibilityState={ checked: true }` when `status="checked"`', () => {
48-
const { getAllByA11yState } = render(
47+
it('should have `aria-checked="true"` when `status="checked"`', () => {
48+
const { getByRole } = render(
4949
<Checkbox.Item status="checked" label="Checked Button" />
5050
);
5151

52-
const elements = getAllByA11yState({ checked: true });
53-
expect(elements).toHaveLength(2);
52+
expect(getByRole('checkbox')).toBeChecked();
5453
});
5554

56-
it('should have `accessibilityState={ checked: false }` when `status="unchecked"', () => {
57-
const { getAllByA11yState } = render(
55+
it('should have `aria-checked="false"` when `status="unchecked"`', () => {
56+
const { getByRole } = render(
5857
<Checkbox.Item status="unchecked" label="Unchecked Button" />
5958
);
6059

61-
const elements = getAllByA11yState({ checked: false });
62-
expect(elements).toHaveLength(2);
60+
expect(getByRole('checkbox')).not.toBeChecked();
6361
});
6462

65-
it('should have `accessibilityState={ checked: false }` when `status="indeterminate"', () => {
66-
const { getAllByA11yState } = render(
63+
it('should have `aria-checked="false"` when `status="indeterminate"`', () => {
64+
const { getByRole } = render(
6765
<Checkbox.Item status="indeterminate" label="Indeterminate Button" />
6866
);
6967

70-
const elements = getAllByA11yState({ checked: false });
71-
expect(elements).toHaveLength(2);
68+
expect(getByRole('checkbox')).not.toBeChecked();
7269
});
7370

7471
it('disables the row when the prop disabled is true', () => {
7572
const { getByLabelText } = render(
7673
<Checkbox.Item
7774
status="unchecked"
7875
label=""
79-
aria-label="some checkbox"
76+
accessibilityLabel="some checkbox"
8077
disabled
8178
/>
8279
);
@@ -92,8 +89,10 @@ it('should have maxFontSizeMultiplier set to 1.5 by default', () => {
9289
const { getByTestId } = render(
9390
<Checkbox.Item label="" testID="checkbox-item" status="unchecked" />
9491
);
95-
const checkboxItemText = getByTestId('checkbox-item-text');
96-
expect(checkboxItemText.props.maxFontSizeMultiplier).toBe(1.5);
92+
93+
expect(
94+
getByTestId('checkbox-item-text', { includeHiddenElements: true })
95+
).toHaveProp('maxFontSizeMultiplier', 1.5);
9796
});
9897

9998
it('should execute onLongPress', () => {

‎src/components/__tests__/DataTable.test.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,7 @@ describe('DataTable.Pagination', () => {
131131
expect(queryByLabelText('Options Select')).toBeFalsy();
132132
});
133133

134-
// TODO: Update testing-library to work with aria-*
135-
it.skip('renders data table pagination with options select', () => {
134+
it('renders data table pagination with options select', () => {
136135
const { getByLabelText, toJSON } = render(
137136
<DataTable.Pagination
138137
page={3}

‎src/components/__tests__/Dialog.test.tsx‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -126,35 +126,45 @@ describe('DialogActions', () => {
126126
it('should apply default styles', () => {
127127
const { getByTestId } = render(
128128
<Dialog.Actions testID="dialog-actions">
129-
<Button>Cancel</Button>
130-
<Button>Ok</Button>
129+
<Button testID="dialog-button-1">Cancel</Button>
130+
<Button testID="dialog-button-2">Ok</Button>
131131
</Dialog.Actions>
132132
);
133133

134-
const dialogActionsContainer = getByTestId('dialog-actions');
135-
const dialogActionButtons = dialogActionsContainer.children;
136-
137-
expect(dialogActionsContainer).toHaveStyle({
134+
expect(getByTestId('dialog-actions')).toHaveStyle({
138135
paddingBottom: 24,
139136
paddingHorizontal: 24,
140137
});
141-
expect(dialogActionButtons[0]).toHaveStyle({ marginRight: 8 });
142-
expect(dialogActionButtons[1]).toHaveStyle({ marginRight: 0 });
138+
expect(getByTestId('dialog-button-1-container')).toHaveStyle({
139+
marginRight: 8,
140+
});
141+
expect(getByTestId('dialog-button-2-container')).toHaveStyle({
142+
marginRight: 0,
143+
});
143144
});
144145

145146
it('should apply custom styles', () => {
146147
const { getByTestId } = render(
147148
<Dialog.Actions testID="dialog-actions">
148-
<Button style={styles.spacing}>Cancel</Button>
149-
<Button style={styles.noSpacing}>Ok</Button>
149+
<Button testID="dialog-button-1" style={styles.spacing}>
150+
Cancel
151+
</Button>
152+
<Button testID="dialog-button-2" style={styles.noSpacing}>
153+
Ok
154+
</Button>
150155
</Dialog.Actions>
151156
);
152157

153-
const dialogActionsContainer = getByTestId('dialog-actions');
154-
const dialogActionButtons = dialogActionsContainer.children;
155-
156-
expect(dialogActionButtons[0]).toHaveStyle({ margin: 10 });
157-
expect(dialogActionButtons[1]).toHaveStyle({ margin: 0 });
158+
expect(getByTestId('dialog-actions')).toHaveStyle({
159+
paddingBottom: 24,
160+
paddingHorizontal: 24,
161+
});
162+
expect(getByTestId('dialog-button-1-container')).toHaveStyle({
163+
marginRight: 8,
164+
});
165+
expect(getByTestId('dialog-button-2-container')).toHaveStyle({
166+
marginRight: 0,
167+
});
158168
});
159169
});
160170

‎src/components/__tests__/FABGroup.test.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ describe('FABActions - labelStyle - containerStyle', () => {
8080
/>
8181
);
8282

83-
expect(getByText('complete')).toHaveStyle({
83+
expect(getByText('complete', { includeHiddenElements: true })).toHaveStyle({
8484
fontSize: 24,
8585
fontWeight: '500',
8686
});
@@ -109,7 +109,7 @@ describe('FABActions - labelStyle - containerStyle', () => {
109109
/>
110110
);
111111

112-
expect(getByA11yHint('hint')).toHaveStyle({
112+
expect(getByA11yHint('hint', { includeHiddenElements: true })).toHaveStyle({
113113
padding: 16,
114114
backgroundColor: '#687456',
115115
});
@@ -164,7 +164,9 @@ it('correct renders custom ripple color passed to FAB.Group and its item', () =>
164164
).toBe('orange');
165165

166166
expect(
167-
getByTestId('fab-group-item-container').props.children.props.rippleColor
167+
getByTestId('fab-group-item-container', {
168+
includeHiddenElements: true,
169+
}).props.children.props.rippleColor
168170
).toBe('yellow');
169171
});
170172

‎src/components/__tests__/Icon.test.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React from 'react';
22
import { Image } from 'react-native';
33

4-
import { render } from '@testing-library/react-native';
4+
import { configure, render } from '@testing-library/react-native';
55

66
import Icon from '../Icon';
77

88
const ICON_SIZE = 24;
99

10+
configure({
11+
defaultIncludeHiddenElements: true,
12+
});
13+
1014
describe('Icon Component', () => {
1115
it('renders correctly with image source', () => {
1216
const source = { uri: 'https://picsum.photos/700' };

‎src/components/__tests__/ListImage.test.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,14 @@ it('renders ListImage with default variant & styles', () => {
4545
});
4646

4747
it('renders ListImage with `image` variant', () => {
48-
const tree = render(
48+
const { getByTestId } = render(
4949
<ListImage
5050
variant="image"
5151
source={{ uri: 'https://www.someurl.com/apple' }}
5252
/>
5353
);
5454

55-
expect(tree.container.props['variant']).toBe('image');
56-
expect(tree.getByTestId(testID)).toHaveStyle(styles.image);
55+
expect(getByTestId(testID)).toHaveStyle(styles.image);
5756
});
5857

5958
it('renders ListImage with `video` variant', () => {
@@ -64,6 +63,5 @@ it('renders ListImage with `video` variant', () => {
6463
/>
6564
);
6665

67-
expect(tree.container.props['variant']).toBe('video');
6866
expect(tree.getByTestId(testID)).toHaveStyle(styles.video);
6967
});

0 commit comments

Comments
 (0)