Skip to content

Commit 7cc0f8f

Browse files
lukewalczaklukewalczak
committed
fix: tests
1 parent 09c767d commit 7cc0f8f

File tree

8 files changed

+125
-125
lines changed

8 files changed

+125
-125
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ import { act, fireEvent, render } from '@testing-library/react-native';
1212
import Dialog from '../../components/Dialog/Dialog';
1313
import Button from '../Button/Button';
1414

15-
jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
16-
// eslint-disable-next-line jest/no-mocks-import
17-
require('react-native/Libraries/Utilities/__mocks__/BackHandler')
18-
);
19-
2015
interface BackHandlerStatic extends RNBackHandlerStatic {
2116
mockPressBack(): void;
2217
}
2318

2419
const BackHandler = RNBackHandler as BackHandlerStatic;
2520

21+
jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
22+
// eslint-disable-next-line jest/no-mocks-import
23+
require('../../utils/__mocks__/BackHandler')
24+
);
25+
2626
describe('Dialog', () => {
2727
it('should render passed children', () => {
2828
const { getByTestId } = render(

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -113,17 +113,15 @@ it('uses the default anchorPosition of top', async () => {
113113
);
114114
}
115115

116-
render(makeMenu(false));
116+
const { rerender } = render(makeMenu(false));
117117

118-
jest
119-
.spyOn(View.prototype, 'measureInWindow')
120-
.mockImplementation((fn) => fn(100, 100, 80, 32));
118+
jest.mocked(View.prototype.measureInWindow).mockImplementation((callback) => {
119+
callback(100, 100, 80, 32);
120+
});
121121

122-
// You must update instead of creating directly and using it because
123-
// componentDidUpdate isn't called by default in jest. Forcing the update
124-
// than triggers measureInWindow, which is how Menu decides where to show
125-
// itself.
126-
screen.update(makeMenu(true));
122+
await act(async () => {
123+
rerender(makeMenu(true));
124+
});
127125

128126
await waitFor(() => {
129127
const menu = screen.getByTestId('menu-view');
@@ -157,13 +155,15 @@ it('respects anchorPosition bottom', async () => {
157155
);
158156
}
159157

160-
render(makeMenu(false));
158+
const { rerender } = render(makeMenu(false));
161159

162160
jest
163-
.spyOn(View.prototype, 'measureInWindow')
164-
.mockImplementation((fn) => fn(100, 100, 80, 32));
161+
.mocked(View.prototype.measureInWindow)
162+
.mockImplementation((callback) => callback(100, 100, 80, 32));
165163

166-
screen.update(makeMenu(true));
164+
await act(async () => {
165+
rerender(makeMenu(true));
166+
});
167167

168168
await waitFor(() => {
169169
const menu = screen.getByTestId('menu-view');

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@ import { act, fireEvent, render } from '@testing-library/react-native';
1111
import { MD3LightTheme } from '../../styles/themes';
1212
import Modal from '../Modal';
1313

14-
jest.mock('react-native-safe-area-context', () => ({
15-
useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
16-
}));
17-
1814
interface BackHandlerStatic extends RNBackHandlerStatic {
1915
mockPressBack(): void;
2016
}
2117

2218
const BackHandler = RNBackHandler as BackHandlerStatic;
2319

20+
jest.mock('react-native-safe-area-context', () => ({
21+
useSafeAreaInsets: () => ({ bottom: 44, left: 0, right: 0, top: 37 }),
22+
}));
23+
2424
jest.mock('react-native/Libraries/Utilities/BackHandler', () =>
2525
// eslint-disable-next-line jest/no-mocks-import
26-
require('react-native/Libraries/Utilities/__mocks__/BackHandler')
26+
require('../../utils/__mocks__/BackHandler')
2727
);
2828

2929
describe('Modal', () => {

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { Animated, Platform, StyleSheet } from 'react-native';
33

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

66
import ProgressBar, { Props } from '../ProgressBar';
77

@@ -81,12 +81,22 @@ it('renders progress bar with full height on web', () => {
8181
});
8282

8383
it('renders progress bar with custom style of filled part', async () => {
84+
jest.useFakeTimers();
85+
8486
const tree = render(
8587
<ProgressBar progress={0.2} fillStyle={styles.fill} testID="progress-bar" />
8688
);
8789
await waitFor(() => tree.getByRole(a11yRole).props.onLayout(layoutEvent));
8890

91+
act(() => {
92+
jest.runAllTimers();
93+
});
94+
95+
await waitFor(() => tree.getByTestId('progress-bar-fill'));
96+
8997
expect(tree.getByTestId('progress-bar-fill')).toHaveStyle({
9098
borderRadius: 4,
9199
});
100+
101+
jest.useRealTimers();
92102
});

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

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import React, { RefObject } from 'react';
22
import { Dimensions, Text, View, Platform } from 'react-native';
33

4-
import {
5-
fireEvent,
6-
render,
7-
waitForElementToBeRemoved,
8-
} from '@testing-library/react-native';
4+
import { fireEvent, render, act } from '@testing-library/react-native';
95

106
import PaperProvider from '../../core/PaperProvider';
117
import Tooltip from '../Tooltip/Tooltip';
@@ -116,21 +112,27 @@ describe('Tooltip', () => {
116112
});
117113

118114
describe('pressOut', () => {
119-
// eslint-disable-next-line jest/valid-title
120115
it('hides the tooltip when the user stop pressing the component', async () => {
121116
const {
122-
wrapper: { queryByText, getByText, findByText },
117+
wrapper: { getByText, findByText },
123118
} = setup({ enterTouchDelay: 50, leaveTouchDelay: 0 });
124119

125120
fireEvent(getByText('dummy component'), 'longPress');
126121

127-
await findByText('some tooltip text');
122+
act(() => {
123+
jest.runAllTimers();
124+
});
125+
126+
const tooltip = await findByText('some tooltip text');
127+
expect(tooltip).toBeOnTheScreen();
128128

129129
fireEvent(getByText('dummy component'), 'pressOut');
130130

131-
await waitForElementToBeRemoved(() => getByText('some tooltip text'));
131+
act(() => {
132+
jest.runAllTimers();
133+
});
132134

133-
expect(queryByText('some tooltip text')).toBeNull();
135+
expect(tooltip).not.toBeOnTheScreen();
134136
});
135137
});
136138

@@ -286,6 +288,10 @@ describe('Tooltip', () => {
286288

287289
fireEvent(getByText('dummy component'), 'hoverIn');
288290

291+
act(() => {
292+
jest.runAllTimers();
293+
});
294+
289295
await findByText('some tooltip text');
290296

291297
unmount();
@@ -306,6 +312,11 @@ describe('Tooltip', () => {
306312
} = setup();
307313

308314
fireEvent(getByText('dummy component'), 'hoverIn');
315+
316+
act(() => {
317+
jest.runAllTimers();
318+
});
319+
309320
fireEvent(getByText('dummy component'), 'hoverOut');
310321
fireEvent(getByText('dummy component'), 'hoverIn');
311322

@@ -314,21 +325,27 @@ describe('Tooltip', () => {
314325
});
315326

316327
describe('hoverOut', () => {
317-
// eslint-disable-next-line jest/valid-title
318328
it('hides the tooltip when the user stops hovering the component', async () => {
319329
const {
320330
wrapper: { queryByText, getByText, findByText },
321331
} = setup({ enterTouchDelay: 50, leaveTouchDelay: 0 });
322332

323333
fireEvent(getByText('dummy component'), 'hoverIn');
324334

325-
await findByText('some tooltip text');
335+
act(() => {
336+
jest.runAllTimers();
337+
});
338+
339+
const tooltip = await findByText('some tooltip text');
340+
expect(tooltip).toBeOnTheScreen();
326341

327342
fireEvent(getByText('dummy component'), 'hoverOut');
328343

329-
await waitForElementToBeRemoved(() => getByText('some tooltip text'));
344+
act(() => {
345+
jest.runAllTimers();
346+
});
330347

331-
expect(queryByText('some tooltip text')).toBeNull();
348+
expect(queryByText('some tooltip text')).not.toBeOnTheScreen();
332349
});
333350
});
334351

@@ -355,6 +372,10 @@ describe('Tooltip', () => {
355372

356373
fireEvent(getByText('dummy component'), 'hoverIn');
357374

375+
act(() => {
376+
jest.runAllTimers();
377+
});
378+
358379
fireEvent(await findByText('some tooltip text'), 'layout', {
359380
nativeEvent: {
360381
layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
@@ -379,6 +400,10 @@ describe('Tooltip', () => {
379400

380401
fireEvent(getByText('dummy component'), 'hoverIn');
381402

403+
act(() => {
404+
jest.runAllTimers();
405+
});
406+
382407
fireEvent(await findByText('some tooltip text'), 'layout', {
383408
nativeEvent: {
384409
layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
@@ -403,6 +428,10 @@ describe('Tooltip', () => {
403428

404429
fireEvent(getByText('dummy component'), 'hoverIn');
405430

431+
act(() => {
432+
jest.runAllTimers();
433+
});
434+
406435
fireEvent(await findByText('some tooltip text'), 'layout', {
407436
nativeEvent: {
408437
layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },
@@ -427,6 +456,10 @@ describe('Tooltip', () => {
427456

428457
fireEvent(getByText('dummy component'), 'hoverIn');
429458

459+
act(() => {
460+
jest.runAllTimers();
461+
});
462+
430463
fireEvent(await findByText('some tooltip text'), 'layout', {
431464
nativeEvent: {
432465
layout: { width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT },

‎src/components/__tests__/__snapshots__/ProgressBar.test.tsx.snap‎

Lines changed: 4 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -30,27 +30,7 @@ exports[`renders colored progress bar 1`] = `
3030
"overflow": "hidden",
3131
}
3232
}
33-
>
34-
<View
35-
collapsable={false}
36-
style={
37-
{
38-
"backgroundColor": "red",
39-
"flex": 1,
40-
"transform": [
41-
{
42-
"translateX": -50,
43-
},
44-
{
45-
"scaleX": 0.0001,
46-
},
47-
],
48-
"width": 100,
49-
}
50-
}
51-
testID="progress-bar-fill"
52-
/>
53-
</View>
33+
/>
5434
</View>
5535
`;
5636

@@ -84,27 +64,7 @@ exports[`renders hidden progress bar 1`] = `
8464
"overflow": "hidden",
8565
}
8666
}
87-
>
88-
<View
89-
collapsable={false}
90-
style={
91-
{
92-
"backgroundColor": "rgba(103, 80, 164, 1)",
93-
"flex": 1,
94-
"transform": [
95-
{
96-
"translateX": -50,
97-
},
98-
{
99-
"scaleX": 0.0001,
100-
},
101-
],
102-
"width": 100,
103-
}
104-
}
105-
testID="progress-bar-fill"
106-
/>
107-
</View>
67+
/>
10868
</View>
10969
`;
11070

@@ -132,27 +92,7 @@ exports[`renders indeterminate progress bar 1`] = `
13292
"overflow": "hidden",
13393
}
13494
}
135-
>
136-
<View
137-
collapsable={false}
138-
style={
139-
{
140-
"backgroundColor": "rgba(103, 80, 164, 1)",
141-
"flex": 1,
142-
"transform": [
143-
{
144-
"translateX": -50,
145-
},
146-
{
147-
"scaleX": 0.0001,
148-
},
149-
],
150-
"width": 100,
151-
}
152-
}
153-
testID="progress-bar-fill"
154-
/>
155-
</View>
95+
/>
15696
</View>
15797
`;
15898

@@ -186,26 +126,6 @@ exports[`renders progress bar with specific progress 1`] = `
186126
"overflow": "hidden",
187127
}
188128
}
189-
>
190-
<View
191-
collapsable={false}
192-
style={
193-
{
194-
"backgroundColor": "rgba(103, 80, 164, 1)",
195-
"flex": 1,
196-
"transform": [
197-
{
198-
"translateX": -50,
199-
},
200-
{
201-
"scaleX": 0.0001,
202-
},
203-
],
204-
"width": 100,
205-
}
206-
}
207-
testID="progress-bar-fill"
208-
/>
209-
</View>
129+
/>
210130
</View>
211131
`;

0 commit comments

Comments
 (0)