Skip to content

Commit 71d5040

Browse files
mdjastrzebskimdjastrzebski
authored
chore: update examples to use toBeOnTheScreen() (#1267)
1 parent aa92b77 commit 71d5040

17 files changed

+87
-64
lines changed

‎examples/basic/__tests__/App.test.tsx‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ test('renders correctly', () => {
99
// Idiom: no need to capture render output, as we will use `screen` for queries.
1010
render(<App />);
1111

12-
// Idiom: `getBy*` queries are predicates by themselves, but we will use it with `expect().toBeTruthy()`
12+
// Idiom: `getBy*` queries are predicates by themselves, but we will use it with `expect().toBeOnTheScreen()`
1313
// to clarify our intent.
1414
expect(
1515
screen.getByRole('header', { name: 'Sign in to Example App' })
16-
).toBeTruthy();
16+
).toBeOnTheScreen();
1717
});
1818

1919
/**
@@ -25,12 +25,11 @@ test('User can sign in successully with correct credentials', async () => {
2525
// Idiom: no need to capture render output, as we will use `screen` for queries.
2626
render(<App />);
2727

28-
// Idiom: `getBy*` queries are predicates by themselves, but we will use it with `expect().toBeTruthy()`
28+
// Idiom: `getBy*` queries are predicates by themselves, but we will use it with `expect().toBeOnTheScreen()`
2929
// to clarify our intent.
30-
// Note: `.toBeTruthy()` is the preferred matcher for checking that elements are present.
3130
expect(
3231
screen.getByRole('header', { name: 'Sign in to Example App' })
33-
).toBeTruthy();
32+
).toBeOnTheScreen();
3433

3534
// Hint: we can use `getByLabelText` to find our text inputs using their labels.
3635
fireEvent.changeText(screen.getByLabelText('Username'), 'admin');
@@ -45,14 +44,14 @@ test('User can sign in successully with correct credentials', async () => {
4544
// already finished
4645
expect(
4746
await screen.findByRole('header', { name: 'Welcome admin!' })
48-
).toBeTruthy();
47+
).toBeOnTheScreen();
4948

50-
// Idiom: use `queryBy*` with `expect().toBeFalsy()` to assess that element is not present.
49+
// Idiom: use `queryBy*` with `expect().not.toBeOnTheScreen()` to assess that element is not present.
5150
expect(
5251
screen.queryByRole('header', { name: 'Sign in to Example App' })
53-
).toBeFalsy();
54-
expect(screen.queryByLabelText('Username')).toBeFalsy();
55-
expect(screen.queryByLabelText('Password')).toBeFalsy();
52+
).not.toBeOnTheScreen();
53+
expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
54+
expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
5655
});
5756

5857
/**
@@ -72,7 +71,7 @@ test('User will see errors for incorrect credentials', async () => {
7271

7372
expect(
7473
screen.getByRole('header', { name: 'Sign in to Example App' })
75-
).toBeTruthy();
74+
).toBeOnTheScreen();
7675

7776
fireEvent.changeText(screen.getByLabelText('Username'), 'admin');
7877
fireEvent.changeText(screen.getByLabelText('Password'), 'qwerty123');
@@ -85,9 +84,9 @@ test('User will see errors for incorrect credentials', async () => {
8584

8685
expect(
8786
screen.getByRole('header', { name: 'Sign in to Example App' })
88-
).toBeTruthy();
89-
expect(screen.getByLabelText('Username')).toBeTruthy();
90-
expect(screen.getByLabelText('Password')).toBeTruthy();
87+
).toBeOnTheScreen();
88+
expect(screen.getByLabelText('Username')).toBeOnTheScreen();
89+
expect(screen.getByLabelText('Password')).toBeOnTheScreen();
9190
});
9291

9392
/**
@@ -98,7 +97,7 @@ test('User can sign in after incorrect attempt', async () => {
9897

9998
expect(
10099
screen.getByRole('header', { name: 'Sign in to Example App' })
101-
).toBeTruthy();
100+
).toBeOnTheScreen();
102101

103102
fireEvent.changeText(screen.getByLabelText('Username'), 'admin');
104103
fireEvent.changeText(screen.getByLabelText('Password'), 'qwerty123');
@@ -111,10 +110,10 @@ test('User can sign in after incorrect attempt', async () => {
111110
fireEvent.changeText(screen.getByLabelText('Password'), 'admin1');
112111
fireEvent.press(screen.getByRole('button', { name: 'Sign In' }));
113112

114-
expect(await screen.findByText('Welcome admin!')).toBeTruthy();
113+
expect(await screen.findByText('Welcome admin!')).toBeOnTheScreen();
115114
expect(
116115
screen.queryByRole('header', { name: 'Sign in to Example App' })
117-
).toBeFalsy();
118-
expect(screen.queryByLabelText('Username')).toBeFalsy();
119-
expect(screen.queryByLabelText('Password')).toBeFalsy();
116+
).not.toBeOnTheScreen();
117+
expect(screen.queryByLabelText('Username')).not.toBeOnTheScreen();
118+
expect(screen.queryByLabelText('Password')).not.toBeOnTheScreen();
120119
});

‎examples/basic/jest-setup.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
/* eslint-disable no-undef, import/no-extraneous-dependencies */
2+
import { configure } from '@testing-library/react-native';
23

34
// Import Jest Native matchers
45
import '@testing-library/jest-native/extend-expect';
56

67
// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
78
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
9+
10+
// Enable excluding hidden elements from the queries by default
11+
configure({
12+
defaultIncludeHiddenElements: false,
13+
});

‎examples/basic/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
},
2020
"devDependencies": {
2121
"@babel/core": "^7.19.3",
22-
"@testing-library/jest-native": "^5.1.2",
22+
"@testing-library/jest-native": "^5.4.0",
2323
"@testing-library/react-native": "^11.4.0",
2424
"@types/react": "~18.0.24",
2525
"@types/react-native": "~0.70.6",

‎examples/react-navigation/jest-setup.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* eslint-disable import/no-extraneous-dependencies */
1+
/* eslint-disable no-undef, import/no-extraneous-dependencies */
22
import { configure } from '@testing-library/react-native';
33

44
// Import Jest Native matchers

‎examples/react-navigation/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
},
2222
"devDependencies": {
2323
"@babel/core": "^7.20.2",
24-
"@testing-library/jest-native": "^5.3.0",
24+
"@testing-library/jest-native": "^5.4.0",
2525
"@testing-library/react-native": "^11.5.0",
2626
"babel-jest": "^29.3.1",
2727
"jest": "^29.3.0",

‎examples/react-navigation/src/DrawerNavigator.test.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ test('Changing screens', () => {
77
renderNavigator(<DrawerNavigator />);
88

99
// Assert initial screen
10-
expect(screen.getByRole('header', { name: 'Home screen' })).toBeTruthy();
10+
expect(screen.getByRole('header', { name: 'Home screen' })).toBeOnTheScreen();
1111

1212
// Open drawer by pressing button
1313
const toggleButton = screen.getByText('Toggle drawer');
@@ -33,6 +33,10 @@ test('Changing screens', () => {
3333
).toHaveAccessibilityState({ selected: true });
3434

3535
// Assert visible screen
36-
expect(screen.getByRole('header', { name: 'Settings screen' })).toBeTruthy();
37-
expect(screen.queryByRole('header', { name: 'Home screen' })).toBeFalsy();
36+
expect(
37+
screen.getByRole('header', { name: 'Settings screen' })
38+
).toBeOnTheScreen();
39+
expect(
40+
screen.queryByRole('header', { name: 'Home screen' })
41+
).not.toBeOnTheScreen();
3842
});

‎examples/react-navigation/src/NativeStackNavigator.test.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import NativeStackNavigator from './NativeStackNavigator';
66
test('Home screen contains the header and list of items', () => {
77
renderNavigator(<NativeStackNavigator />);
88

9-
expect(screen.getByRole('header', { name: 'Home screen' })).toBeTruthy();
9+
expect(screen.getByRole('header', { name: 'Home screen' })).toBeOnTheScreen();
1010
expect(screen.getAllByRole('button', { name: /Item/ })).toHaveLength(10);
1111

1212
expect(
1313
screen.queryByRole('header', { name: /Details for item/i })
14-
).toBeFalsy();
14+
).not.toBeOnTheScreen();
1515
});
1616

1717
test('Pressing an item takes user to the details screen', () => {
@@ -22,9 +22,13 @@ test('Pressing an item takes user to the details screen', () => {
2222

2323
expect(
2424
screen.getByRole('header', { name: 'Details for Item 5' })
25-
).toBeTruthy();
26-
expect(screen.getByText('The number you have chosen is 5.')).toBeTruthy();
25+
).toBeOnTheScreen();
26+
expect(
27+
screen.getByText('The number you have chosen is 5.')
28+
).toBeOnTheScreen();
2729

2830
// Home screen is still in the element tree but it is hidden from accessibility
29-
expect(screen.queryByRole('header', { name: 'Home screen' })).toBeFalsy();
31+
expect(
32+
screen.queryByRole('header', { name: 'Home screen' })
33+
).not.toBeOnTheScreen();
3034
});

‎examples/react-navigation/src/StackNavigator.test.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import StackNavigator from './StackNavigator';
66
test('Home screen contains the header and list of items', () => {
77
renderNavigator(<StackNavigator />);
88

9-
expect(screen.getByRole('header', { name: 'Home screen' })).toBeTruthy();
9+
expect(screen.getByRole('header', { name: 'Home screen' })).toBeOnTheScreen();
1010
expect(screen.getAllByRole('button', { name: /Item/ })).toHaveLength(10);
1111

1212
expect(
1313
screen.queryByRole('header', { name: /Details for item/i })
14-
).toBeFalsy();
14+
).not.toBeOnTheScreen();
1515
});
1616

1717
test('Pressing an item takes user to the details screen', () => {
@@ -22,9 +22,13 @@ test('Pressing an item takes user to the details screen', () => {
2222

2323
expect(
2424
screen.getByRole('header', { name: 'Details for Item 5' })
25-
).toBeTruthy();
26-
expect(screen.getByText('The number you have chosen is 5.')).toBeTruthy();
25+
).toBeOnTheScreen();
26+
expect(
27+
screen.getByText('The number you have chosen is 5.')
28+
).toBeOnTheScreen();
2729

2830
// Home screen is still in the element tree but it is hidden from accessibility
29-
expect(screen.queryByRole('header', { name: 'Home screen' })).toBeFalsy();
31+
expect(
32+
screen.queryByRole('header', { name: 'Home screen' })
33+
).not.toBeOnTheScreen();
3034
});

‎examples/react-navigation/src/TabNavigator.test.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,17 @@ import TabNavigator from './TabNavigator';
55

66
test('Changing tabs', () => {
77
renderNavigator(<TabNavigator />);
8-
expect(screen.getByRole('header', { name: 'Home screen' })).toBeTruthy();
8+
expect(screen.getByRole('header', { name: 'Home screen' })).toBeOnTheScreen();
99

1010
// Note: React Navigation uses `button` role for tab buttons as workaround.
1111
// It should actually be `tab` role.
1212
const settingsTab = screen.getByRole('button', { name: 'Settings' });
1313
fireEvent.press(settingsTab);
1414

15-
expect(screen.getByRole('header', { name: 'Settings screen' })).toBeTruthy();
16-
expect(screen.queryByRole('header', { name: 'Home screen' })).toBeFalsy();
15+
expect(
16+
screen.getByRole('header', { name: 'Settings screen' })
17+
).toBeOnTheScreen();
18+
expect(
19+
screen.queryByRole('header', { name: 'Home screen' })
20+
).not.toBeOnTheScreen();
1721
});

‎examples/react-navigation/src/screens/DetailsScreen.test.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,10 @@ test('Details screen contains the header and content', () => {
1616

1717
expect(
1818
screen.getByRole('header', { name: 'Details for Item 100' })
19-
).toBeTruthy();
20-
expect(screen.getByText('The number you have chosen is 100.')).toBeTruthy();
19+
).toBeOnTheScreen();
20+
expect(
21+
screen.getByText('The number you have chosen is 100.')
22+
).toBeOnTheScreen();
2123

2224
// Note: Go Back button get navigation from `useNavigation` hook
2325
fireEvent.press(screen.getByRole('button', { name: 'Go Back' }));

0 commit comments

Comments
 (0)