Saltar al contenido principal

Ayudantes en las pruebas de Jutro

El paquete @jutro/test proporciona una funcionalidad que facilita la escritura de pruebas de Jutro.

Biblioteca de pruebas​

Jutro encapsula las utilidades de la biblioteca de pruebas, para que pueda importarlas directamente desde @jutro/test. Esto incluye lo siguiente:

  • @testing-library/react

Se pueden importar como:

import { screen } from '@jutro/test';
import userEvent from '@testing-library/user-event';

Ayudantes​

Renderizado​

import { render, screen } from '@jutro/test';

render(<MyComponent />);
expect(screen.getByRole('heading')).toBeInTheDocument();

Jutro encapsula el renderizado desde la biblioteca de pruebas.

Puede proporcionar opciones de renderizado como el segundo argumento de render(). Los siguientes proveedores se renderizan de forma predeterminada:

  • router
  • globalization
  • modalNext
  • theme
  • breakpointTracker

Para cada proveedor, usted puede hacer lo siguiente:

  • Reemplazarlo por un proveedor diferente (debe ser un proveedor de contexto).
  • Pasar propiedades a un proveedor existente.
  • Deshabilitar un proveedor.

Por ejemplo:

render(<CurrencyInput {...currencyInputProps} />, {
  providers: {
    theme: {
      disable: true,
    },
    router: {
      provider: HashRouterContext.Provider,
    },
    globalization: {
      props: {
        defaultLocale: 'ja-JP',
      },
    },
  },
});

React Strict Mode​

El modo estricto de React es un componente nativo de React que ejecuta verificaciones adicionales cuando está habilitado en un entorno de desarrollo, lo que le ayuda a encontrar errores comunes en sus componentes. Ofrece los siguientes beneficios:

  • Comprueba los componentes para detectar cualquier uso de API obsoletas.
  • Vuelve a renderizar los componentes una vez más para intentar encontrar cualquier componente que cambie involuntariamente su comportamiento cuando se renderiza por segunda vez.
  • Vuelve a ejecutar un ciclo adicional de configuración y limpieza para detectar cualquier efecto en el código.

Para habilitar el modo estricto de React, en su archivo .env, agregue JUTRO_REACT_STRICT_MODE=true.

Las aplicaciones preexistentes no tendrán habilitado el modo estricto de forma predeterminada, sin embargo, cualquier aplicación nueva de Jutro creada a partir de una plantilla de aplicación de Jutro tendrá la variable de entorno habilitada en el archivo .env.

translatorForTests​

  • key: La forma del mensaje que se va a traducir, o string.
  • args: Un objeto de argumentos que se pasa al mensaje de localización para renderizar los valores de las variables.

Si key tiene el formato intlMessageShape, antepone Tx: al valor del campo defaultMessage.

Si key es un string, devuelve la key.

translatorForTestsWithSuffix​

Igual que translatorForTests, pero agrega -translated al final de cada mensaje.

getTranslation​

import { screen, getTranslation } from '@jutro/test';

const languageLabel = screen.getByText(
  getTranslation({
    id: 'my-app.widgets.SomeComponent.languageLabel',
    defaultMessage: 'Language',
  })
);
  • input: La forma del mensaje que se va a traducir, o string.
  • args: Un objeto de argumentos que se pasa al mensaje de localización para renderizar los valores de las variables.

Si input tiene el formato intlMessageShape, devuelve el valor con formato del campo defaultValue.

Si input es un string, devuelve el string.

flushPromises​

Puede utilizar esta función para esperar a que se completen las operaciones asíncronas. Por ejemplo, en una función de prueba async:

await flushPromises();
expect(everythingIsFineNow());

En la mayoría de los casos, esto no es necesario. Antes de usar flushPromises, pruebe los siguientes métodos en la biblioteca de pruebas:

convertToUTCObject​

const year = convertToUTCObject(date).year;

Convierte un objeto Date en un objeto con los siguientes campos:

  • Año
  • Mes
  • Día
  • Hora
  • Minuto

convertToUTCString​

const utcSting = convertToUTCString(date);

Convierte un objeto Date en un string con formato UTC que contiene el año, el mes, el día, la hora y los minutos.

convertToUTCDate​

const properDate = convertToUTCDate(date);

Convierte un objeto Date en un objeto de fecha UTC.

getLocaleTestData​

const testData = getLocaleTestData(category, options);
  • category: Puede ser “fecha”, “número” o “moneda”.
  • options: Un objeto de opciones:
    • excludeValues: string[]

Devuelve datos de configuración regional de la categoría dada para cada configuración regional admitida.

Aserciones​

assertIsInput​

const input = screen.getByRole('switch', { name: label });
assertIsInput(input);

Arroja un error si input no es una entrada HTML.

assertIsAnchor​

const link = screen.getByRole('link');
assertIsAnchor(link);

Arroja un error si link no es un anclaje HTML.

const link = screen.getByRole('link');
assertIsLink(link);

Arroja un error si link no es un enlace HTML.

assertIsElement​

const link = screen.getByRole('link');
assertIsElement(link);

Arroja un error si link no es un elemento HTML.

assertIsNotNull​

const titleContent = screen.getByRole('heading').textContent;
assertIsNotNull(titleContent);

Arroja un error si titleContent es nulo.