Cypress cannot show the useTranslation string correctly

[angie-wei]

Current behavior

The code uses the react-intl package for text translation, but it displays the label name instead of the defined translation string.

Desired behavior

Test code to reproduce

video_text.tsx

import React from 'react';
import { useTranslation as t } from '@utils/hooks';

export default function App() {
  const MORE_VIDEOS = t('label_more_videos');
  return (
    <div className='App'>
      <p data-test-id='more-video-title'>{MORE_VIDEOS}</p>
    </div>
  );
}

useTranslation.ts

import { useIntl } from 'react-intl';

const useTranslation = (
  id: string,
  values?: Record<string, string | number>
): string => {
  const { formatMessage } = useIntl();

  return formatMessage({ id }, values);
};

export default useTranslation;

Cypress Version

13.6.0

Node version

v18.18.0

Operating System

Windows 11

Debug Logs

Use Cypress will show the below error, but the regular browser will show the translation normally.

Error: [@formatjs/intl Error MISSING_TRANSLATION] Missing message: "label_more_videos" for locale "en", using id as fallback. 

    at new MissingTranslationError (error.js:76:1)
    at formatMessage (message.js:65:1)
    at formatMessage (provider.js:46:18)
    at useTranslation (useTranslation.ts:9:10)
    at VideoCarousel (VideoCarousel.tsx:45:24)
    at renderWithHooks (react-dom.development.js:16305:1)
    at updateFunctionComponent (react-dom.development.js:19588:1)
    at updateSimpleMemoComponent (react-dom.development.js:19425:1)
    at beginWork (react-dom.development.js:21678:1)
    at beginWork$1 (react-dom.development.js:27426:1)

Other

No response