Кипарис: как имитировать использование перевода в тесте?

Я хочу попросить, чтобы у меня был компонент 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  -

Вы ставите t вместо useTranslation — может, в этом дело?

Derek 01.07.2024 10:07

Мне кажется, проблема в компоненте - ведь нельзя использовать хук в шаблоне? Во всех примерах, которые я вижу, используется JavaScript. Можете ли вы объяснить, как это работает?

S.T.Priest 01.07.2024 12:11

Извините, поскольку это конфиденциальный код, я не могу предоставить здесь весь код. Я думаю, мне следует сначала изучить реакцию и кипарис, чтобы посмотреть, смогу ли я это исправить. Спасибо за вашу помощь!

JeffChen 02.07.2024 08:28
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
64
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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'
})

Не работает, все равно показывает исходный текст. Я обновляю журнал в вопросе. вроде называется заглушкой, но текст все равно не меняется

JeffChen 01.07.2024 12:03

Все, что я могу вам сказать, это то, что заглушка определенно должна работать именно так. Если результата по-прежнему нет, возможно, неисправен компонент. Код, который вы опубликовали для компонента, выглядит неправильным, как упоминалось в комментариях, но я предположил, что вы просто сокращаете его. Если выложите полный компонент, я покажу вам рабочий тест.

Aladin Spaz 01.07.2024 13:00

Другие вопросы по теме