es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo obtener el valor “real” de la clave de i18next con React Testing Library?

12 Jul, 2023 Programación

Sé cómo ejecutar pruebas utilizando claves i18n json, pero ¿no tengo idea de cómo puedo obtener el valor de esa clave? (aquella que el usuario verá cuando se carguen las traducciones)

import { render, screen } from "@testing-library/react";
import Login from "../../pages/login/Login";
import { ThemeContextProvider } from "../../contexts/ThemeContext";

jest.mock("react-i18next", () => ({
  useTranslation: () => ({ t: (key) => key }),
}));

const renderWithContext = () => {
  return render(
    <themecontextprovider>
      <login></login>
    </themecontextprovider>
  );
};

describe("Test login", () => {
  it("test labels", () => {
    renderWithContext();
    screen.getByLabelText("Email");
    screen.getByLabelText("form.label.password");
  });
});
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En el fragmento de código anterior, el hook useTranslation se simula para devolver la clave de traducción en lugar de la cadena traducida. Para obtener la cadena traducida para una clave en particular, puedes pasar la clave a la función t proporcionada por el hook useTranslation.

    Por ejemplo, si quieres obtener la cadena traducida para la etiqueta “Email”, puedes hacer lo siguiente:

    import { useTranslation } from 'react-i18next';

const { t } = useTranslation();
const emailLabel = t('Email');

    Esto devolverá la cadena traducida para la clave de la etiqueta “Email”, que luego puedes utilizar en tus pruebas o aplicación.

    Ten en cuenta que en el código de prueba proporcionado se utilizan las funciones getByLabelText para encontrar elementos de formulario con etiquetas específicas. Estas funciones utilizan los atributos aria-label o aria-labelledby en los elementos, que no están relacionados con las traducciones de i18next. Si estás utilizando i18next para traducir etiquetas de formulario, necesitarías obtener la cadena traducida y establecerla como valor de los atributos aria-label o aria-labelledby tú mismo.

Comments are closed.