Open angie-wei opened 3 weeks ago
I encountered an issue where translation is not working under Cypress; the text checks will fail the test.
video.cy.tsx
import { IntlProvider } from 'react-intl';
import VideoPropsBuilder from '../../cypress/support/builders/ComponentProps/VideoProps';
describe('Video Component Tests', () => {
it('Displays the "More Videos" section title', () => {
const props = new VideoPropsBuilder()
.setVideoArray(uploadedVideos)
.setBackground('transparent')
.setIsCompact(false)
.getProps();
cy.mount(
<IntlProvider locale="en" defaultLocale="en">
<Video {...props} />
</IntlProvider>
);
cy.getByDataID(selectors.moreVideoTitle).should(
'have.text',
'More Videos'
);
});
}
If anyone has time, below is the CodeSandbox link to my demo project. I’d appreciate any advice or discussion.
https://codesandbox.io/p/sandbox/ykvrf7
I'm trying to create an online project to reproduce the issue, but even using the simple useIntl() function from react-intl is causing an error.
/utils/hooks/useTranslation.ts:7:36
const { formatMessage } = useIntl();
^
[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
This error never appears in my local environment, and I haven’t found any solution so far, other than trying to wrap the entire app with <IntlProvider>
, but that still doesn’t resolve the issue for me.
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
useTranslation.ts
locale/en.ts
Cypress Version
13.6.0
Node version
v18.18.0
Operating System
Windows 11
Debug Logs
Other
No response