Saltar al contenido principal

Patrones en RTL

Consulte a continuación algunos patrones comunes en RTL. Tenga en cuenta que estos ejemplos no son un código completo y es posible que no funcionen en todos los casos.

Organización​

La renderización básica se logra mediante el reemplazo de las funciones mount o shallow por la función render. Debe importar la función render desde el paquete @jutro/test.

render(<Component />);

El siguiente ejemplo muestra TranslatorProvider, pero ModalNextProvider, ThemeProvider, BreakpointTrackerProvider y también router se incluyen.

render(<Component />);

Al pasar propiedades a un contexto, debe especificar un segundo argumento para render que incluya opciones de renderización. La lista completa de opciones se puede encontrar aquí.

También puede configurar proveedores de contexto utilizando la variable providers, como se muestra a continuación. Puede pasar propiedades al proveedor, deshabilitarlo o sustituirlo por su propio proveedor personalizado. Hay cinco proveedores que puede configurar:

  • router
  • globalization
  • modalNext
  • theme
  • breackpointTracker
render(<Component />, {
  providers: {
    globalization: {
      props: {
        defaultLocale: someLocale,
      },
    },
  },
});

Actuación​

Simular un evento de clic en RTL es simple:

userEvent.click(button);

Simular el ingreso de un valor en un campo es mucho más sencillo en RTL. La función userEvent.clear borra el campo y la userEvent.type escribe caracteres en él. Consulte los userEvent documentos para obtener más información acerca de la utilidad userEvent.

userEvent.clear(input);
userEvent.type(input, 'myValue{enter}');

No hay forma en RTL de llevar el foco o desenfocar directamente un elemento determinado, pero puede simular fácilmente el resultado de la tecla Tab.

Nota: Esto solo funcionará si el botón es el primer elemento en recibir el foco en la página. Si es el segundo elemento en recibir el foco, se necesitaría presionar tres veces la tecla Tab: dos para llevar el foco al botón y un tercero para desenfocarlo.

userEvent.tab();
userEvent.tab();

Aserción​

Cómo verificar si una entrada tiene el valor deseado:

expect(screen.getByRole('textbox')).toHaveValue('foo');

Cómo verificar si existe un botón y si tiene un aria-label traducido correctamente:

const myButton = screen.getByLabelText(getTranslation(messageProps.myBtnLabel));

expect(myButton).toBeInTheDocument();

El siguiente ejemplo ilustra que las aserciones son idénticas cuando se utilizan simulaciones. La única diferencia sería en el código de acción:

const callbackSpy = jest.fn();

// some actions happen

expect(callbackSpy).toHaveBeenCalledWith(
  newValue,
  undefined,
  expect.anything()
);

El comparador className tiene un nombre diferente en @testing-library/jest-dom. Encontrará la lista de todos los comparadores aquí.

expect(element).toHaveClass('someClass');

Cómo verificar si existe un elemento con un texto determinado:

expect(screen.getByText(getTranslation('myText'))).toBeInTheDocument();

Cómo verificar si una casilla de verificación está marcada:

const checkbox = screen.getByRole('checkbox');

expect(checkbox).toBeChecked();

A continuación, se muestra cómo verificar si la entrada está deshabilitada de manera accesible. Tenga en cuenta que .toBeDisabled() no se puede utilizar aquí porque no tiene en cuenta la presencia o ausencia del atributo aria-disabled.

expect(input).toHaveAttribute('aria-disabled', 'true');
On this page