Skip to content

Commit 26ee927

Browse files
mdjastrzebskimdjastrzebski
committed
docs: jest matchers
1 parent f0e6455 commit 26ee927

File tree

2 files changed

+395
-0
lines changed

2 files changed

+395
-0
lines changed

‎examples/basic/tutorial-rsd/3-jest-matchers-rsd.test.tsx

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react-native';
3+
import { html, css } from 'react-strict-dom';
4+
5+
test('showcase: toBeOnTheScreen', () => {
6+
render(
7+
<html.div>
8+
<html.div data-testid="view" />
9+
</html.div>,
10+
);
11+
12+
expect(screen.getByTestId('view')).toBeOnTheScreen();
13+
expect(screen.queryByTestId('non-existent')).not.toBeOnTheScreen();
14+
});
15+
16+
test('showcase: toBeIntoHaveTextContentTheDocument', () => {
17+
render(
18+
<html.div>
19+
<html.p data-testid="text">Hello World</html.p>
20+
</html.div>,
21+
);
22+
23+
expect(screen.getByTestId('text')).toHaveTextContent('Hello World');
24+
expect(screen.getByTestId('text')).toHaveTextContent(/hello/i);
25+
expect(screen.getByTestId('text')).toHaveTextContent('Hello', { exact: false });
26+
});
27+
28+
test('showcase: toContainElement', () => {
29+
render(
30+
<html.div>
31+
<html.div data-testid="outer">
32+
<html.div data-testid="inner" />
33+
</html.div>
34+
<html.div data-testid="outer-2" />
35+
</html.div>,
36+
);
37+
38+
expect(screen.getByTestId('outer')).toContainElement(screen.getByTestId('inner'));
39+
expect(screen.getByTestId('outer')).not.toContainElement(screen.getByTestId('outer-2'));
40+
});
41+
42+
test('showcase: toBeEmptyElement', () => {
43+
render(
44+
<html.div>
45+
<html.div data-testid="empty" />
46+
<html.div data-testid="not-empty">
47+
<html.p data-testid="text">Hello World</html.p>
48+
</html.div>
49+
</html.div>,
50+
);
51+
52+
expect(screen.getByTestId('empty')).toBeEmptyElement();
53+
expect(screen.getByTestId('not-empty')).not.toBeEmptyElement();
54+
});
55+
56+
test('showcase: toHaveDisplayValue', () => {
57+
render(
58+
<html.div>
59+
<html.input data-testid="input" value="Hello" />
60+
</html.div>,
61+
);
62+
63+
expect(screen.getByTestId('input')).toHaveDisplayValue('Hello');
64+
});
65+
66+
test('showcase: toHaveAccessibilityValue', () => {
67+
render(
68+
<html.div>
69+
<html.div
70+
data-testid="view"
71+
aria-valuetext="33%"
72+
aria-valuenow={33}
73+
aria-valuemax={100}
74+
aria-valuemin={0}
75+
/>
76+
</html.div>,
77+
);
78+
79+
expect(screen.getByTestId('view')).toHaveAccessibilityValue({ text: '33%' });
80+
expect(screen.getByTestId('view')).toHaveAccessibilityValue({ now: 33 });
81+
expect(screen.getByTestId('view')).toHaveAccessibilityValue({ now: 33, min: 0, max: 100 });
82+
});
83+
84+
test('showcase: toBeEnabled/toBeDisabled', () => {
85+
render(
86+
<html.div>
87+
<html.div data-testid="enabled" aria-disabled={false} />
88+
<html.div data-testid="disabled" aria-disabled />
89+
</html.div>,
90+
);
91+
92+
expect(screen.getByTestId('enabled')).toBeEnabled();
93+
expect(screen.getByTestId('enabled')).not.toBeDisabled();
94+
expect(screen.getByTestId('disabled')).toBeDisabled();
95+
expect(screen.getByTestId('disabled')).not.toBeEnabled();
96+
});
97+
98+
test('showcase: toBeSelected', () => {
99+
render(
100+
<html.div>
101+
<html.div data-testid="selected" aria-selected />
102+
<html.div data-testid="not-selected" />
103+
</html.div>,
104+
);
105+
106+
expect(screen.getByTestId('selected')).toBeSelected();
107+
expect(screen.getByTestId('not-selected')).not.toBeSelected();
108+
});
109+
110+
test('showcase: toBeBusy', () => {
111+
render(
112+
<html.div>
113+
<html.div data-testid="busy" aria-busy />
114+
<html.div data-testid="not-busy" />
115+
</html.div>,
116+
);
117+
118+
expect(screen.getByTestId('busy')).toBeBusy();
119+
expect(screen.getByTestId('not-busy')).not.toBeBusy();
120+
});
121+
122+
test('showcase: toBeExpanded/toBeCollapsed', () => {
123+
render(
124+
<html.div>
125+
<html.div data-testid="expanded" aria-expanded />
126+
<html.div data-testid="collapsed" aria-expanded={false} />
127+
<html.div data-testid="default" />
128+
</html.div>,
129+
);
130+
131+
expect(screen.getByTestId('expanded')).toBeExpanded();
132+
expect(screen.getByTestId('expanded')).not.toBeCollapsed();
133+
134+
expect(screen.getByTestId('collapsed')).toBeCollapsed();
135+
expect(screen.getByTestId('collapsed')).not.toBeExpanded();
136+
137+
expect(screen.getByTestId('default')).not.toBeCollapsed();
138+
expect(screen.getByTestId('default')).not.toBeExpanded();
139+
});
140+
141+
test('showcase: toBeVisible', () => {
142+
render(
143+
<html.div>
144+
<html.div data-testid="visible" />
145+
<html.div data-testid="not-visible" style={styles.opacityZero} />
146+
</html.div>,
147+
);
148+
149+
expect(screen.getByTestId('visible')).toBeVisible();
150+
expect(screen.getByTestId('not-visible')).not.toBeVisible();
151+
});
152+
153+
test('showcase: toHaveStyle', () => {
154+
render(
155+
<html.div>
156+
<html.span data-testid="text" style={styles.fontSize16}>
157+
Hello World
158+
</html.span>
159+
</html.div>,
160+
);
161+
162+
expect(screen.getByTestId('text')).toHaveStyle({ fontSize: 16 });
163+
expect(screen.getByTestId('text')).not.toHaveStyle({ fontSize: 12 });
164+
});
165+
166+
test('showcase: toHaveProp', () => {
167+
render(
168+
<html.div>
169+
<html.p data-testid="text" aria-label="Hello World" />
170+
</html.div>,
171+
);
172+
173+
expect(screen.getByTestId('text')).toHaveProp('accessibilityLabel');
174+
expect(screen.getByTestId('text')).not.toHaveProp('aria-hidden');
175+
176+
expect(screen.getByTestId('text')).toHaveProp('accessibilityLabel', 'Hello World');
177+
expect(screen.getByTestId('text')).not.toHaveProp('accessibilityLabel', 'Goodbye World');
178+
});
179+
180+
const styles = css.create({
181+
opacityZero: {
182+
opacity: '0%',
183+
},
184+
fontSize16: {
185+
fontSize: '16px',
186+
},
187+
});

‎examples/basic/tutorial/3-jest-matchers.test.tsx

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import * as React from 'react';
2+
import { render, screen } from '@testing-library/react-native';
3+
import { Text, TextInput, View } from 'react-native';
4+
import { s } from 'react-strict-dom/runtime';
5+
6+
test('showcase: toBeOnTheScreen', () => {
7+
render(
8+
<View>
9+
<View testID="view" />
10+
</View>,
11+
);
12+
13+
expect(screen.getByTestId('view')).toBeOnTheScreen();
14+
expect(screen.queryByTestId('non-existent')).not.toBeOnTheScreen();
15+
});
16+
17+
test('showcase: toBeIntoHaveTextContentTheDocument', () => {
18+
render(
19+
<View>
20+
<Text testID="text">Hello World</Text>
21+
</View>,
22+
);
23+
24+
expect(screen.getByTestId('text')).toHaveTextContent('Hello World');
25+
expect(screen.getByTestId('text')).toHaveTextContent(/hello/i);
26+
expect(screen.getByTestId('text')).toHaveTextContent('Hello', { exact: false });
27+
});
28+
29+
test('showcase: toContainElement', () => {
30+
render(
31+
<View>
32+
<View testID="outer">
33+
<View testID="inner" />
34+
</View>
35+
<View testID="outer-2" />
36+
</View>,
37+
);
38+
39+
expect(screen.getByTestId('outer')).toContainElement(screen.getByTestId('inner'));
40+
expect(screen.getByTestId('outer')).not.toContainElement(screen.getByTestId('outer-2'));
41+
});
42+
43+
test('showcase: toBeEmptyElement', () => {
44+
render(
45+
<View>
46+
<View testID="empty" />
47+
<View testID="not-empty">
48+
<Text testID="text">Hello World</Text>
49+
</View>
50+
</View>,
51+
);
52+
53+
expect(screen.getByTestId('empty')).toBeEmptyElement();
54+
expect(screen.getByTestId('not-empty')).not.toBeEmptyElement();
55+
});
56+
57+
test('showcase: toHaveDisplayValue', () => {
58+
render(
59+
<View>
60+
<TextInput testID="input" value="Hello" />
61+
</View>,
62+
);
63+
64+
expect(screen.getByTestId('input')).toHaveDisplayValue('Hello');
65+
});
66+
67+
test('showcase: toHaveAccessibilityValue', () => {
68+
render(
69+
<View>
70+
<View
71+
testID="view"
72+
aria-valuetext="33%"
73+
aria-valuenow={33}
74+
aria-valuemax={100}
75+
aria-valuemin={0}
76+
/>
77+
</View>,
78+
);
79+
80+
expect(screen.getByTestId('view')).toHaveAccessibilityValue({ text: '33%' });
81+
expect(screen.getByTestId('view')).toHaveAccessibilityValue({ now: 33 });
82+
expect(screen.getByTestId('view')).toHaveAccessibilityValue({ now: 33, min: 0, max: 100 });
83+
});
84+
85+
test('showcase: toBeEnabled/toBeDisabled', () => {
86+
render(
87+
<View>
88+
<View testID="enabled" aria-disabled={false} />
89+
<View testID="disabled" aria-disabled />
90+
</View>,
91+
);
92+
93+
expect(screen.getByTestId('enabled')).toBeEnabled();
94+
expect(screen.getByTestId('enabled')).not.toBeDisabled();
95+
expect(screen.getByTestId('disabled')).toBeDisabled();
96+
expect(screen.getByTestId('disabled')).not.toBeEnabled();
97+
});
98+
99+
test('showcase: toBeSelected', () => {
100+
render(
101+
<View>
102+
<View testID="selected" aria-selected />
103+
<View testID="not-selected" />
104+
</View>,
105+
);
106+
107+
expect(screen.getByTestId('selected')).toBeSelected();
108+
expect(screen.getByTestId('not-selected')).not.toBeSelected();
109+
});
110+
111+
test('showcase: toBeChecked/toBePartiallyChecked (role: checkbox)', () => {
112+
render(
113+
<View>
114+
<View accessible role="checkbox" testID="checked" aria-checked />
115+
<View accessible role="checkbox" testID="partially-checked" aria-checked="mixed" />
116+
<View accessible role="checkbox" testID="not-checked" />
117+
</View>,
118+
);
119+
120+
expect(screen.getByTestId('checked')).toBeChecked();
121+
expect(screen.getByTestId('checked')).not.toBePartiallyChecked();
122+
123+
expect(screen.getByTestId('partially-checked')).toBePartiallyChecked();
124+
expect(screen.getByTestId('partially-checked')).not.toBeChecked();
125+
126+
expect(screen.getByTestId('not-checked')).not.toBeChecked();
127+
expect(screen.getByTestId('not-checked')).not.toBePartiallyChecked();
128+
});
129+
130+
test('showcase: toBeChecked (roles: switch, radio)', () => {
131+
render(
132+
<View>
133+
<View accessible role="switch" testID="checked" aria-checked />
134+
<View accessible role="radio" testID="not-checked" />
135+
</View>,
136+
);
137+
138+
expect(screen.getByTestId('checked')).toBeChecked();
139+
expect(screen.getByTestId('not-checked')).not.toBeChecked();
140+
});
141+
142+
test('showcase: toBeBusy', () => {
143+
render(
144+
<View>
145+
<View testID="busy" aria-busy />
146+
<View testID="not-busy" />
147+
</View>,
148+
);
149+
150+
expect(screen.getByTestId('busy')).toBeBusy();
151+
expect(screen.getByTestId('not-busy')).not.toBeBusy();
152+
});
153+
154+
test('showcase: toBeExpanded/toBeCollapsed', () => {
155+
render(
156+
<View>
157+
<View testID="expanded" aria-expanded />
158+
<View testID="collapsed" aria-expanded={false} />
159+
<View testID="default" />
160+
</View>,
161+
);
162+
163+
expect(screen.getByTestId('expanded')).toBeExpanded();
164+
expect(screen.getByTestId('expanded')).not.toBeCollapsed();
165+
166+
expect(screen.getByTestId('collapsed')).toBeCollapsed();
167+
expect(screen.getByTestId('collapsed')).not.toBeExpanded();
168+
169+
expect(screen.getByTestId('default')).not.toBeCollapsed();
170+
expect(screen.getByTestId('default')).not.toBeExpanded();
171+
});
172+
173+
test('showcase: toBeVisible', () => {
174+
render(
175+
<View>
176+
<View testID="visible" />
177+
<View testID="not-visible" style={{ opacity: 0 }} />
178+
</View>,
179+
);
180+
181+
expect(screen.getByTestId('visible')).toBeVisible();
182+
expect(screen.getByTestId('not-visible')).not.toBeVisible();
183+
});
184+
185+
test('showcase: toHaveStyle', () => {
186+
render(
187+
<View>
188+
<View testID="view" style={{ backgroundColor: 'red' }} />
189+
</View>,
190+
);
191+
192+
expect(screen.getByTestId('view')).toHaveStyle({ backgroundColor: 'red' });
193+
expect(screen.getByTestId('view')).not.toHaveStyle({ backgroundColor: 'blue' });
194+
});
195+
196+
test('showcase: toHaveProp', () => {
197+
render(
198+
<View>
199+
<Text testID="text" numberOfLines={1} />
200+
</View>,
201+
);
202+
203+
expect(screen.getByTestId('text')).toHaveProp('numberOfLines');
204+
expect(screen.getByTestId('text')).not.toHaveProp('adjustsFontSizeToFit');
205+
206+
expect(screen.getByTestId('text')).toHaveProp('numberOfLines', 1);
207+
expect(screen.getByTestId('text')).not.toHaveProp('numberOfLines', 5);
208+
});

0 commit comments

Comments
 (0)