1
1
import type ReactNavigationNative from '@react-navigation/native' ;
2
- import { fireEvent , render , screen , within } from '@testing-library/react-native' ;
2
+ import { fireEvent , render , screen , userEvent , within } from '@testing-library/react-native' ;
3
3
import { addMonths , addYears , subMonths , subYears } from 'date-fns' ;
4
4
import type { ComponentType } from 'react' ;
5
5
import CalendarPicker from '@components/DatePicker/CalendarPicker' ;
@@ -121,7 +121,7 @@ describe('CalendarPicker', () => {
121
121
expect ( onSelectedMock ) . toHaveBeenCalledWith ( '2022-02-15' ) ;
122
122
} ) ;
123
123
124
- test ( 'should block the back arrow when there is no available dates in the previous month' , ( ) => {
124
+ test ( 'should block the back arrow when there is no available dates in the previous month' , async ( ) => {
125
125
const minDate = new Date ( '2003-02-01' ) ;
126
126
const value = new Date ( '2003-02-17' ) ;
127
127
@@ -134,16 +134,17 @@ describe('CalendarPicker', () => {
134
134
) ;
135
135
136
136
// When the previous month arrow is pressed
137
- fireEvent . press ( screen . getByTestId ( 'prev-month-arrow' ) ) ;
137
+ const user = userEvent . setup ( ) ;
138
+ await user . press ( screen . getByTestId ( 'prev-month-arrow' ) ) ;
138
139
139
140
// Then the previous month should not be called as the previous month button is disabled
140
- const prevMonth = subMonths ( new Date ( ) , 1 ) . getMonth ( ) ;
141
+ const prevMonth = subMonths ( value , 1 ) . getMonth ( ) ;
141
142
expect ( screen . queryByText ( monthNames . at ( prevMonth ) ?? '' ) ) . not . toBeOnTheScreen ( ) ;
142
143
} ) ;
143
144
144
- test ( 'should block the next arrow when there is no available dates in the next month' , ( ) => {
145
+ test ( 'should block the next arrow when there is no available dates in the next month' , async ( ) => {
145
146
const maxDate = new Date ( '2003-02-24' ) ;
146
- const value = '2003-02-17' ;
147
+ const value = new Date ( '2003-02-17' ) ;
147
148
render (
148
149
< CalendarPicker
149
150
maxDate = { maxDate }
@@ -152,10 +153,11 @@ describe('CalendarPicker', () => {
152
153
) ;
153
154
154
155
// When the next month arrow is pressed
155
- fireEvent . press ( screen . getByTestId ( 'next-month-arrow' ) ) ;
156
+ const user = userEvent . setup ( ) ;
157
+ await user . press ( screen . getByTestId ( 'next-month-arrow' ) ) ;
156
158
157
159
// Then the next month should not be called as the next month button is disabled
158
- const nextMonth = addMonths ( new Date ( ) , 1 ) . getMonth ( ) ;
160
+ const nextMonth = addMonths ( value , 1 ) . getMonth ( ) ;
159
161
expect ( screen . queryByText ( monthNames . at ( nextMonth ) ?? '' ) ) . not . toBeOnTheScreen ( ) ;
160
162
} ) ;
161
163
0 commit comments