(PC-30797) feat(tests): Bump msw from 1 to 2

jest.config.js

@@ -3,6 +3,7 @@ const { excludeCollectCoverageFrom } = require('./jest.excludeCollectCoverageFro
 module.exports = {
   preset: 'react-native',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testEnvironmentOptions: { customExportConditions: [''] },
   moduleNameMapper: {
     '^api(.*)$': '<rootDir>/src/api$1',
     '^features(.*)$': '<rootDir>/src/features$1',

package.json

@@ -328,7 +328,7 @@
     "metro-react-native-babel-preset": "^0.76.9",
     "mini-css-extract-plugin": "^1.5.0",
     "mockdate": "^3.0.2",
-    "msw": "^1.2.3",
+    "msw": "^2.3.1",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
     "playwright": "^1.28.1",
     "pnp-webpack-plugin": "^1.6.4",

server/package.json

@@ -70,4 +70,4 @@
     "ts-node": "^10.7.0",
     "typescript": "^4.3.5"
   }
-}
+}

src/api/apiHelpers.native.test.ts

@@ -115,8 +115,9 @@ describe('[api] helpers', () => {
 
     it('needs authentication response when refresh token fails', async () => {
       mockServer.postApi<RefreshResponse>('/v1/refresh_access_token', {
-        requestOptions: { persist: true },
-        responseOptions: { statusCode: 400 },
+        responseOptions: {
+          statusCode: 400,
+        },
       })
 
       mockGetTokenStatus.mockReturnValueOnce('expired')

src/features/auth/pages/login/Login.native.test.tsx

@@ -31,7 +31,7 @@ import { NetworkErrorFixture, UnknownErrorFixture } from 'libs/recaptcha/fixture
 import { storage } from 'libs/storage'
 import { mockServer } from 'tests/mswServer'
 import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC'
-import { fireEvent, render, act, screen, simulateWebviewMessage } from 'tests/utils'
+import { act, fireEvent, render, screen, simulateWebviewMessage } from 'tests/utils'
 import { SUGGESTION_DELAY_IN_MS } from 'ui/components/inputs/EmailInputWithSpellingHelp/useEmailSpellingHelp'
 import { SNACK_BAR_TIME_OUT_LONG } from 'ui/components/snackBar/SnackBarContext'
 
@@ -804,8 +804,10 @@ function simulateSigninEmailNotValidated() {
 function simulateSigninNetworkFailure() {
   mockServer.postApi('/v1/signin', {
     responseOptions: {
-      statusCode: 'network-error',
-      data: 'Network request failed',
+      data: {
+        code: 'NETWORK_REQUEST_FAILED',
+        general: ['Erreur réseau. Tu peux réessayer une fois la connexion réétablie'],
+      },
     },
   })
 }

src/features/auth/pages/signup/SignupConfirmationEmailSent/EmailResendModal.native.test.tsx

@@ -34,9 +34,7 @@ describe('<EmailResendModal />', () => {
   it('should dismiss modal when close icon is pressed', async () => {
     renderEmailResendModal({})
 
-    await act(async () => {
-      fireEvent.press(screen.getByLabelText('Fermer la modale'))
-    })
+    fireEvent.press(screen.getByLabelText('Fermer la modale'))
 
     expect(onDismissMock).toHaveBeenCalledTimes(1)
   })
@@ -68,14 +66,15 @@ describe('<EmailResendModal />', () => {
 
   it('should display timer when resend email button is clicked', async () => {
     renderEmailResendModal({})
+
     await waitFor(() => {
       expect(screen.getByText('Demander un nouveau lien')).toBeEnabled()
     })
 
-    await act(async () => fireEvent.press(screen.getByText('Demander un nouveau lien')))
+    fireEvent.press(screen.getByText('Demander un nouveau lien'))
 
     expect(
-      screen.getByText(
+      await screen.findByText(
         'Nous t’avons envoyé un nouveau lien. Une autre demande sera possible dans 60s.'
       )
     ).toBeOnTheScreen()
@@ -87,10 +86,10 @@ describe('<EmailResendModal />', () => {
       expect(screen.getByText('Demander un nouveau lien')).toBeEnabled()
     })
 
-    await act(async () => fireEvent.press(screen.getByText('Demander un nouveau lien')))
+    fireEvent.press(screen.getByText('Demander un nouveau lien'))
 
     expect(
-      screen.getByText(
+      await screen.findByText(
         'Une erreur s’est produite lors de l’envoi du nouveau lien. Réessaie plus tard.'
       )
     ).toBeOnTheScreen()
@@ -102,9 +101,11 @@ describe('<EmailResendModal />', () => {
       expect(screen.getByText('Demander un nouveau lien')).toBeEnabled()
     })
 
-    await act(async () => fireEvent.press(screen.getByText('Demander un nouveau lien')))
+    fireEvent.press(screen.getByText('Demander un nouveau lien'))
 
-    expect(screen.getByText('Tu as dépassé le nombre de renvois autorisés.')).toBeOnTheScreen()
+    expect(
+      await screen.findByText('Tu as dépassé le nombre de renvois autorisés.')
+    ).toBeOnTheScreen()
   })
 
   it('should reset error message when another resend attempt is made', async () => {
@@ -118,8 +119,6 @@ describe('<EmailResendModal />', () => {
 
     await act(async () => fireEvent.press(screen.getByText('Demander un nouveau lien')))
 
-    await act(async () => fireEvent.press(screen.getByText('Demander un nouveau lien')))
-
     expect(
       screen.queryByText(
         'Une erreur s’est produite lors de l’envoi du nouveau lien. Réessaie plus tard.'
@@ -132,15 +131,14 @@ describe('<EmailResendModal />', () => {
       remainingResends: 0,
       counterResetDatetime: '2023-09-30T12:58:04.065652Z',
     })
+
     renderEmailResendModal({})
 
-    await waitFor(() => {
-      expect(
-        screen.queryByText(
-          'Tu as dépassé le nombre de 3 demandes de lien autorisées. Tu pourras réessayer le 30/09/2023 à 12h58.'
-        )
-      ).not.toBeOnTheScreen()
-    })
+    expect(
+      screen.queryByText(
+        'Tu as dépassé le nombre de 3 demandes de lien autorisées. Tu pourras réessayer le 30/09/2023 à 12h58.'
+      )
+    ).not.toBeOnTheScreen()
   })
 
   describe('When shouldLogInfo remote config is false', () => {
@@ -181,12 +179,14 @@ describe('<EmailResendModal />', () => {
         expect(screen.getByText('Demander un nouveau lien')).toBeEnabled()
       })
 
-      await act(async () => fireEvent.press(screen.getByText('Demander un nouveau lien')))
+      fireEvent.press(screen.getByText('Demander un nouveau lien'))
 
-      expect(eventMonitoring.captureException).toHaveBeenCalledWith(
-        'Could not resend validation email: error',
-        { level: 'info' }
-      )
+      await waitFor(() => {
+        expect(eventMonitoring.captureException).toHaveBeenCalledWith(
+          'Could not resend validation email: error',
+          { level: 'info' }
+        )
+      })
     })
   })
 })

src/features/auth/pages/signup/SignupForm.native.test.tsx

@@ -24,7 +24,7 @@ import * as useFeatureFlagAPI from 'libs/firebase/firestore/featureFlags/useFeat
 import { eventMonitoring } from 'libs/monitoring'
 import { mockServer } from 'tests/mswServer'
 import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC'
-import { act, fireEvent, render, screen } from 'tests/utils'
+import { act, fireEvent, render, screen, waitFor } from 'tests/utils'
 
 import { SignupForm } from './SignupForm'
 
@@ -486,6 +486,8 @@ describe('Signup Form', () => {
 
       renderSignupForm()
 
+      await act(async () => {})
+
       await act(async () => fireEvent.press(await screen.findByTestId('S’inscrire avec Google')))
 
       expect(apiPostGoogleAuthorize).toHaveBeenCalledWith({
@@ -509,6 +511,8 @@ describe('Signup Form', () => {
 
       renderSignupForm()
 
+      await act(async () => {})
+
       await act(async () => fireEvent.press(await screen.findByTestId('S’inscrire avec Google')))
 
       expect(screen.getByText('Renseigne ton âge')).toBeOnTheScreen()
@@ -541,6 +545,7 @@ describe('Signup Form', () => {
 
       renderSignupForm()
 
+      await act(async () => {})
       await act(async () => fireEvent.press(await screen.findByTestId('S’inscrire avec Google')))
 
       const datePicker = screen.getByTestId('date-picker-spinner-native')
@@ -598,6 +603,7 @@ describe('Signup Form', () => {
 
       renderSignupForm()
 
+      await act(async () => {})
       await act(async () => fireEvent.press(await screen.findByTestId('S’inscrire avec Google')))
 
       const datePicker = screen.getByTestId('date-picker-spinner-native')
@@ -652,7 +658,13 @@ describe('Signup Form', () => {
 
       renderSignupForm()
 
-      await act(async () => fireEvent.press(await screen.findByTestId('S’inscrire avec Google')))
+      const ssoButton = await screen.findByTestId('S’inscrire avec Google')
+
+      await waitFor(async () => {
+        expect(ssoButton.props.focusable).toBeTruthy()
+      })
+
+      await act(async () => fireEvent.press(ssoButton))
 
       const datePicker = screen.getByTestId('date-picker-spinner-native')
       await act(async () =>
@@ -798,21 +810,29 @@ describe('Signup Form', () => {
 
         renderSignupForm()
 
+        const ssoButton = await screen.findByTestId('S’inscrire avec Google')
+
         expect(analytics.logStepperDisplayed).toHaveBeenNthCalledWith(
           1,
           StepperOrigin.HOME,
           PreValidationSignupStep.Email,
           undefined
         )
 
-        await act(async () => fireEvent.press(await screen.findByTestId('S’inscrire avec Google')))
+        await waitFor(async () => {
+          expect(ssoButton.props.focusable).toBeTruthy()
+        })
+
+        await act(async () => fireEvent.press(ssoButton))
 
-        expect(analytics.logStepperDisplayed).toHaveBeenNthCalledWith(
-          2,
-          StepperOrigin.HOME,
-          PreValidationSignupStep.Birthday,
-          'SSO_signup'
-        )
+        await waitFor(() => {
+          expect(analytics.logStepperDisplayed).toHaveBeenNthCalledWith(
+            2,
+            StepperOrigin.HOME,
+            PreValidationSignupStep.Birthday,
+            'SSO_signup'
+          )
+        })
 
         const datePicker = screen.getByTestId('date-picker-spinner-native')
         await act(async () => {

src/features/bookings/api/useOngoingOrEndedBooking.native.test.ts

@@ -4,7 +4,7 @@ import { bookingsSnap } from 'features/bookings/fixtures/bookingsSnap'
 import * as useNetInfoContextDefault from 'libs/network/NetInfoWrapper'
 import { mockServer } from 'tests/mswServer'
 import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC'
-import { act, renderHook } from 'tests/utils'
+import { renderHook, waitFor } from 'tests/utils'
 
 jest.mock('libs/react-query/usePersistQuery', () => ({
   usePersistQuery: jest.requireActual('react-query').useQuery,
@@ -38,21 +38,23 @@ describe('useOngoingOrEndedBooking', () => {
     const { result } = renderHook(() => useOngoingOrEndedBooking(booking.id), {
       wrapper: ({ children }) => reactQueryProviderHOC(children),
     })
-    await act(async () => {})
 
-    expect(result.current?.data?.id).toEqual(booking.id)
-    expect(result.current?.data?.stock.id).toEqual(booking.stock.id)
+    await waitFor(() => {
+      expect(result.current?.data?.id).toEqual(booking.id)
+      expect(result.current?.data?.stock.id).toEqual(booking.stock.id)
+    })
   })
 
   it('should return ended_bookings when there is one', async () => {
     const booking = bookingsSnap.ended_bookings[0]
     const { result } = renderHook(() => useOngoingOrEndedBooking(booking.id), {
       wrapper: ({ children }) => reactQueryProviderHOC(children),
     })
-    await act(async () => {})
 
-    expect(result.current?.data?.id).toEqual(booking.id)
-    expect(result.current?.data?.stock.id).toEqual(booking.stock.id)
+    await waitFor(() => {
+      expect(result.current?.data?.id).toEqual(booking.id)
+      expect(result.current?.data?.stock.id).toEqual(booking.stock.id)
+    })
   })
 
   it('should return null if no ongoing nor ended booking can be found', async () => {
@@ -61,8 +63,8 @@ describe('useOngoingOrEndedBooking', () => {
       wrapper: ({ children }) => reactQueryProviderHOC(children),
     })
 
-    await act(async () => {})
-
-    expect(result.current.data).toBeNull()
+    await waitFor(() => {
+      expect(result.current.data).toBeNull()
+    })
   })
 })

src/features/home/components/modules/video/VideoCarouselModule.native.test.tsx

@@ -17,7 +17,7 @@ import { analytics } from 'libs/analytics'
 import { ContentTypes } from 'libs/contentful/types'
 import * as useFeatureFlagAPI from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
 import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC'
-import { act, fireEvent, render, screen } from 'tests/utils'
+import { act, fireEvent, render, screen, waitFor } from 'tests/utils'
 
 jest.mock('libs/firebase/analytics/analytics')
 
@@ -181,11 +181,13 @@ describe('<VideoCarouselModule />', () => {
       })
       await act(async () => fireEvent.press(nextVideoButton))
 
-      expect(analytics.logConsultVideo).toHaveBeenNthCalledWith(1, {
-        from: 'video_carousel_block',
-        moduleId: videoCarouselModuleFixture.id,
-        homeEntryId: videoCarouselModuleFixture.homeEntryId,
-        youtubeId: videoCarouselModuleFixture.items[2].youtubeVideoId,
+      await waitFor(() => {
+        expect(analytics.logConsultVideo).toHaveBeenNthCalledWith(1, {
+          from: 'video_carousel_block',
+          moduleId: videoCarouselModuleFixture.id,
+          homeEntryId: videoCarouselModuleFixture.homeEntryId,
+          youtubeId: videoCarouselModuleFixture.items[2].youtubeVideoId,
+        })
       })
     })