diff --git a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx b/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx index 81b2859a6c3..76edf9aec2f 100644 --- a/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx +++ b/packages/clerk-js/src/ui/components/UserProfile/__tests__/MfaPage.test.tsx @@ -104,7 +104,14 @@ describe('MfaPage', () => { }); it('Complete verification with phone_code and autogenerated backup codes', async () => { - const { wrapper, fixtures } = await createFixtures(initConfig); + const { wrapper, fixtures } = await createFixtures(f => { + f.withPhoneNumber({ second_factors: ['phone_code'], used_for_second_factor: true }); + f.withUser({ + phone_numbers: [{ phone_number: '+306911111111', id: 'id', backup_codes: ['111111', '111111'] }], + two_factor_enabled: true, + }); + f.withBackupCode(); + }); fixtures.clerk.user?.phoneNumbers[0].setReservedForSecondFactor.mockResolvedValue({} as PhoneNumberResource); const { getByText, userEvent, getByRole } = render(, { wrapper }); @@ -132,7 +139,12 @@ describe('MfaPage', () => { getByText( /Save these backup codes and store them somewhere safe. If you lose access to your authentication device, you can use backup codes to sign in./i, ); - getByText(/backup codes/i); + + const backupCodesTitle = getByText(/backup codes/i, { + selector: '[data-localization-key="userProfile.backupCodePage.title__codelist"]', + }); + + expect(backupCodesTitle).toBeInTheDocument(); await userEvent.click(getByRole('button', { name: /finish/i })); });