Skip to content

Commit d5590df

Browse files
fix: toBeOnTheScreen() with RNTL v12 (#151)
1 parent 130344b commit d5590df

File tree

5 files changed

+30
-27
lines changed

5 files changed

+30
-27
lines changed

README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,9 @@ You can check that an already captured element has not been removed from the ele
239239

240240
> **Note**<br/> This matcher requires React Native Testing Library v10.1 or later, as it includes
241241
> the `screen` object.
242+
>
243+
> **Note**<br/> If you're using React Native Testing Library v12 or later, you need to install Jest
244+
> Native v5.4.2 or later.
242245
243246
#### Examples
244247

package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"@babel/runtime": "^7.18.9",
4343
"@callstack/eslint-config": "^13.0.1",
4444
"@relmify/jest-serializer-strip-ansi": "^1.0.2",
45-
"@testing-library/react-native": "^11.0.0",
45+
"@testing-library/react-native": "^12.0.0-rc.0",
4646
"@types/jest": "^29.0.1",
4747
"@types/react": "^18.0.19",
4848
"@types/react-native": "^0.71.0",
@@ -52,12 +52,12 @@
5252
"eslint": "^8.21.0",
5353
"husky": "^8.0.1",
5454
"jest": "^29.0.1",
55-
"metro-react-native-babel-preset": "^0.72.3",
55+
"metro-react-native-babel-preset": "0.73.7",
5656
"prettier": "^2.7.1",
5757
"pretty-quick": "^3.1.3",
58-
"react": "18.1.0",
59-
"react-native": "^0.70.6",
60-
"react-test-renderer": "18.1.0",
58+
"react": "18.2.0",
59+
"react-native": "0.71.3",
60+
"react-test-renderer": "18.2.0",
6161
"semantic-release": "^19.0.3",
6262
"typescript": "^4.8.3"
6363
},

src/__tests__/to-be-visible.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describe('.toBeVisible', () => {
2020

2121
test('handles view with display "none"', () => {
2222
const { getByTestId } = render(<View testID="test" style={{ display: 'none' }} />);
23-
expect(getByTestId('test')).not.toBeVisible();
23+
expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
2424
});
2525

2626
test('handles ancestor view with 0 opacity', () => {
@@ -31,7 +31,7 @@ describe('.toBeVisible', () => {
3131
</View>
3232
</View>,
3333
);
34-
expect(getByTestId('test')).not.toBeVisible();
34+
expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
3535
});
3636

3737
test('handles ancestor view with display "none"', () => {
@@ -42,7 +42,7 @@ describe('.toBeVisible', () => {
4242
</View>
4343
</View>,
4444
);
45-
expect(getByTestId('test')).not.toBeVisible();
45+
expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
4646
});
4747

4848
test('handles empty modal', () => {
@@ -77,12 +77,12 @@ describe('.toBeVisible', () => {
7777

7878
test('handles not visible modal', () => {
7979
const { getByTestId } = render(<Modal testID="test" visible={false} />);
80-
expect(getByTestId('test')).not.toBeVisible();
80+
expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
8181
});
8282

8383
test('handles inaccessible view (iOS)', () => {
8484
const { getByTestId, update } = render(<View testID="test" accessibilityElementsHidden />);
85-
expect(getByTestId('test')).not.toBeVisible();
85+
expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
8686

8787
update(<View testID="test" accessibilityElementsHidden={false} />);
8888
expect(getByTestId('test')).toBeVisible();
@@ -96,14 +96,14 @@ describe('.toBeVisible', () => {
9696
</View>
9797
</View>,
9898
);
99-
expect(getByTestId('test')).not.toBeVisible();
99+
expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
100100
});
101101

102102
test('handles inaccessible view (Android)', () => {
103103
const { getByTestId, update } = render(
104104
<View testID="test" importantForAccessibility="no-hide-descendants" />,
105105
);
106-
expect(getByTestId('test')).not.toBeVisible();
106+
expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
107107

108108
update(<View testID="test" importantForAccessibility="auto" />);
109109
expect(getByTestId('test')).toBeVisible();
@@ -117,7 +117,7 @@ describe('.toBeVisible', () => {
117117
</View>
118118
</View>,
119119
);
120-
expect(getByTestId('test')).not.toBeVisible();
120+
expect(getByTestId('test', { includeHiddenElements: true })).not.toBeVisible();
121121
});
122122

123123
test('handles null elements', () => {

src/__tests__/to-have-text-content.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ describe('.toHaveTextContent', () => {
7474
test('can handle multiple levels with no explicit children prop', () => {
7575
const NoChildren = ({ text }: { text: string }) => <Text>{text}</Text>;
7676
const answer = 'Answer';
77-
const { container } = render(
77+
const { root } = render(
7878
<View>
7979
<Text>
8080
{answer}
@@ -86,27 +86,27 @@ describe('.toHaveTextContent', () => {
8686
</View>,
8787
);
8888

89-
expect(container).toHaveTextContent(/^Answer: 42$/);
89+
expect(root).toHaveTextContent(/^Answer: 42$/);
9090
});
9191

9292
test('throws when no match is found', () => {
93-
const { container } = render(<Text>Should succeed</Text>);
93+
const { root } = render(<Text>Should succeed</Text>);
9494

9595
expect(() => {
96-
expect(container).toHaveTextContent('Should fail');
96+
expect(root).toHaveTextContent('Should fail');
9797
}).toThrow();
9898
});
9999

100100
test('does not throw error with empty content', () => {
101-
const { container } = render(<Text />);
102-
expect(container).toHaveTextContent('');
101+
const { root } = render(<Text />);
102+
expect(root).toHaveTextContent('');
103103
});
104104

105105
test('is case-sensitive', () => {
106-
const { container } = render(<Text>Sensitive text</Text>);
106+
const { root } = render(<Text>Sensitive text</Text>);
107107

108-
expect(container).toHaveTextContent('Sensitive text');
109-
expect(container).not.toHaveTextContent('sensitive text');
108+
expect(root).toHaveTextContent('Sensitive text');
109+
expect(root).not.toHaveTextContent('sensitive text');
110110
});
111111

112112
test('can handle conditional rendering', () => {
@@ -124,8 +124,8 @@ describe('.toHaveTextContent', () => {
124124

125125
test('can handle text with an interpolated variable', () => {
126126
const variable = 'variable';
127-
const { container } = render(<Text>With a {variable}</Text>);
127+
const { root } = render(<Text>With a {variable}</Text>);
128128

129-
expect(container).toHaveTextContent('With a variable');
129+
expect(root).toHaveTextContent('With a variable');
130130
});
131131
});

src/to-be-on-the-screen.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export function toBeOnTheScreen(this: jest.MatcherContext, element: ReactTestIns
77
checkReactElement(element, toBeOnTheScreen, this);
88
}
99

10-
const pass = element === null ? false : getScreen().container === getRootElement(element);
10+
const pass = element === null ? false : getScreenRoot() === getRootElement(element);
1111

1212
const errorFound = () => {
1313
return `expected element tree not to contain element but found:\n${printElement(element)}`;
@@ -37,15 +37,15 @@ function getRootElement(element: ReactTestInstance) {
3737
return root;
3838
}
3939

40-
function getScreen() {
40+
function getScreenRoot() {
4141
try {
4242
// eslint-disable-next-line import/no-extraneous-dependencies
4343
const { screen } = require('@testing-library/react-native');
4444
if (!screen) {
4545
throw new Error('screen is undefined');
4646
}
4747

48-
return screen;
48+
return screen.UNSAFE_root ?? screen.container;
4949
} catch (error) {
5050
throw new Error(
5151
'Could not import `screen` object from @testing-library/react-native.\n\n' +

0 commit comments

Comments
 (0)