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' }));

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"@babel/preset-react": "^7.18.6",
3636
"@babel/preset-typescript": "^7.18.6",
3737
"@callstack/eslint-config": "^13.0.1",
38-
"@testing-library/jest-native": "^5.0.0",
38+
"@testing-library/jest-native": "^5.4.0",
3939
"@types/jest": "^29.2.3",
4040
"@types/react": "~18.0.18",
4141
"@types/react-native": "~0.70.0",

‎website/docs/API.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -672,10 +672,10 @@ Please note that additional `render` specific operations like `update`, `unmount
672672

673673
```jsx
674674
const detailsScreen = within(screen.getByA11yHint('Details Screen'));
675-
expect(detailsScreen.getByText('Some Text')).toBeTruthy();
676-
expect(detailsScreen.getByDisplayValue('Some Value')).toBeTruthy();
677-
expect(detailsScreen.queryByLabelText('Some Label')).toBeTruthy();
678-
await expect(detailsScreen.findByA11yHint('Some Label')).resolves.toBeTruthy();
675+
expect(detailsScreen.getByText('Some Text')).toBeOnTheScreen();
676+
expect(detailsScreen.getByDisplayValue('Some Value')).toBeOnTheScreen();
677+
expect(detailsScreen.queryByLabelText('Some Label')).toBeOnTheScreen();
678+
await expect(detailsScreen.findByA11yHint('Some Label')).resolves.toBeOnTheScreen();
679679
```
680680

681681
Use cases for scoped queries include:
@@ -692,7 +692,7 @@ import { render, screen } from '@testing-library/react-native';
692692

693693
render(<Form />);
694694
const submitButton = screen.queryByText('submit');
695-
expect(submitButton).toBeNull(); // it doesn't exist
695+
expect(submitButton).not.toBeOnTheScreen(); // it doesn't exist
696696
```
697697

698698
## `queryAll` APIs

‎website/docs/Queries.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -426,13 +426,13 @@ render(<Text style={{ display: 'none' }}>Hidden from accessibility</Text>);
426426
// Exclude hidden elements
427427
expect(
428428
screen.queryByText('Hidden from accessibility', { includeHiddenElements: false })
429-
).toBeFalsy();
429+
).not.toBeOnTheScreen();
430430

431431
// Include hidden elements
432-
expect(screen.getByText('Hidden from accessibility')).toBeTruthy();
432+
expect(screen.getByText('Hidden from accessibility')).toBeOnTheScreen();
433433
expect(
434434
screen.getByText('Hidden from accessibility', { includeHiddenElements: true })
435-
).toBeTruthy();
435+
).toBeOnTheScreen();
436436
```
437437

438438
## TextMatch

‎website/docs/ReactNavigation.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ describe('Testing react navigation', () => {
182182
const header = await screen.findByText('List of numbers from 1 to 20');
183183
const items = await screen.findAllByText(/Item number/);
184184

185-
expect(header).toBeTruthy();
185+
expect(header).toBeOnTheScreen();
186186
expect(items.length).toBe(10);
187187
});
188188

@@ -200,8 +200,8 @@ describe('Testing react navigation', () => {
200200
const newHeader = await screen.findByText('Showing details for 5');
201201
const newBody = await screen.findByText('the number you have chosen is 5');
202202

203-
expect(newHeader).toBeTruthy();
204-
expect(newBody).toBeTruthy();
203+
expect(newHeader).toBeOnTheScreen();
204+
expect(newBody).toBeOnTheScreen();
205205
});
206206
});
207207
```
@@ -329,7 +329,7 @@ describe('Testing react navigation', () => {
329329
render(component);
330330
const button = await screen.findByText('Go to notifications');
331331

332-
expect(button).toBeTruthy();
332+
expect(button).toBeOnTheScreen();
333333
});
334334

335335
test('clicking on the button takes you to the notifications screen', async () => {
@@ -343,12 +343,12 @@ describe('Testing react navigation', () => {
343343
const oldScreen = screen.queryByText('Welcome!');
344344
const button = await screen.findByText('Go to notifications');
345345

346-
expect(oldScreen).toBeTruthy();
346+
expect(oldScreen).toBeOnTheScreen();
347347

348348
fireEvent(button, 'press');
349349
const newScreen = await screen.findByText('This is the notifications screen');
350350

351-
expect(newScreen).toBeTruthy();
351+
expect(newScreen).toBeOnTheScreen();
352352
});
353353
});
354354
```

‎website/docs/ReduxIntegration.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('AddTodo component test', () => {
3737
// There is a TextInput.
3838
// https://github.com/callstack/react-native-testing-library/blob/ae3d4af370487e1e8fedd8219f77225690aefc59/examples/redux/components/AddTodo.js#L24
3939
const input = screen.getByPlaceholderText(/repository/i);
40-
expect(input).toBeTruthy();
40+
expect(input).toBeOnTheScreen();
4141

4242
const textToEnter = 'This is a random element';
4343
fireEvent.changeText(input, textToEnter);

0 commit comments

Comments
 (0)