Я хочу попросить, чтобы у меня был компонент EmailSignUpView
, который использует react-intl
для перевода текстового контента.
import { useTranslation as t } from '@utils/hooks';
<div className = {styles.notifyContainer}>
<div className = {styles.notifyTextContainer}>
<h2
className = {styles.signUpheading}
data-test-id = "email-signup-heading"
>
{t('email_stay_in_touch')}
</h2>
</div>
</div>
и вот как мы реализуем useTranslation
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;
и вот мой тест
import { IntlProvider } from 'react-intl';
import EmailSignUpView from '@components/EmailSignUpView/EmailSignUpView';
import MockRouter from '../../cypress/support/utils';
import { enTransMessages } from '../../cypress/support/testData/testData';
import * as hooks from '@utils/hooks';
describe('Email Signup Section tests', () => {
before(() => {
// Stub the useTranslation hook
cy.stub(hooks, 'useTranslation').callsFake(() => ({
t: (key) => {
const translations = {
'email_stay_in_touch': 'The text that I want to test!', // Add other key-value pairs as needed
};
return translations[key] || key;
},
}));
});
it('validate default Heading', () => {
cy.mount(
<MockRouter>
<IntlProvider locale = "en" messages = {enTransMessages}>
<EmailSignUpView />
</IntlProvider>
</MockRouter>
);
cy.getByDataID(selectors.heading)
.should('have.text', 'The text that I want to test!')
.and('be.visible');
});
});
но в результате текст оказался не таким, как я ожидал.
Кто-нибудь знает, где я могу ошибаться? Спасибо!
Обновление: разместите лог здесь.
Type Function Alias(es) # Calls
stub-1 useTranslation -
spy-1 push -
spy-2 replace -
spy-3 reload -
spy-4 back -
spy-5 forward -
stub-2 prefetch 2
spy-6 beforePopState -
spy-7 emit -
spy-8 off -
spy-9 on -
Мне кажется, проблема в компоненте - ведь нельзя использовать хук в шаблоне? Во всех примерах, которые я вижу, используется JavaScript. Можете ли вы объяснить, как это работает?
Извините, поскольку это конфиденциальный код, я не могу предоставить здесь весь код. Я думаю, мне следует сначала изучить реакцию и кипарис, чтобы посмотреть, смогу ли я это исправить. Спасибо за вашу помощь!
stub().callFake()
должен предоставлять тот же тип результата, что и сам крючок (введите string
в соответствии с реальным хуком).
Вместо этого вы возвращаете объект, возможно, пытаясь реализовать эквивалентный код для перехватчика?
Попробуйте вернуть строку, самое простое:
cy.stub(hooks, 'useTranslation').callsFake(() => {
return 'The text that I want to test!';
})
...
cy.getByDataID(selectors.heading)
.should('have.text', 'The text that I want to test!')
Если вы хотите использовать несколько переводов, используя параметр реального хука, возможно, это — предполагая, что id
— это языковой ключ:
cy.stub(hooks, 'useTranslation').callsFake((id, values) => {
const translations = {
'en': 'The text that I want to test!',
'zh': '我想要测试的文本',
'es': 'El texto que quiero probar.',
'ar': 'النص الذي أريد اختباره'
};
return translations[id] || 'not found'
})
Не работает, все равно показывает исходный текст. Я обновляю журнал в вопросе. вроде называется заглушкой, но текст все равно не меняется
Все, что я могу вам сказать, это то, что заглушка определенно должна работать именно так. Если результата по-прежнему нет, возможно, неисправен компонент. Код, который вы опубликовали для компонента, выглядит неправильным, как упоминалось в комментариях, но я предположил, что вы просто сокращаете его. Если выложите полный компонент, я покажу вам рабочий тест.
Вы ставите
t
вместоuseTranslation
— может, в этом дело?