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.

Pruebas para el elemento SVG en Jest (React-Redux)

13 Jul, 2023 Programación

Tengo un componente User definido para una aplicación de Reddit de la siguiente manera:

// User.js

import React from "react";
import { useSelector } from "react-redux";
import { selectUsername, selectAuthState } from "./userSlice";
import Reddit from "../../api/Reddit";

const User = () => {
    const userID = useSelector(selectUsername);
    const authState = useSelector(selectAuthState);
    const { isLoading } = useSelector(state => state.user)

const handleAuth = (e) => {
    e.preventDefault();
    Reddit.getAccessToken();
}

if (isLoading) {
    return (
        <svg classname="spinner" viewbox="0 0 50 50">
          <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
        </svg>
    )
} else if (authState) {
    return (
        <a id="reddit-username" target="_blank" rel="noreferrer noopener" href="//www.reddit.com/user/${userID}`}" aria-label="Current user ID">{userID}</a>
    )
} else {
    return (
        <a id="reddit-username" href="/" onclick="{handleAuth}" aria-label="Connect the web app with your Reddit account">Enlázate con Reddit</a>
    )
}
}

export default User;

Hasta ahora, el archivo de prueba para el componente está estructurado de la siguiente manera:

// User.spec.js

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from '../../app/store';
import User from "../../features/User/User";

test("renders 'Enlázate con Reddit' link by default", () => {
  const { getByText } = render( 
    <provider store="{store}">
      <user></user>
    </provider>
  );

expect(getByText("Enlázate con Reddit")).toBeInTheDocument();
});

Estoy tratando de escribir una prueba para renderizar el elemento SVG mientras el componente está cargando, pero no puedo entender cómo hacerlo, ya que soy nuevo en las pruebas en React-Redux. ¿Cómo debería hacer esto?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para probar la representación del elemento SVG mientras el componente se está cargando, puedes modificar el archivo de prueba de la siguiente manera:

    // User.spec.js

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from '../../app/store';
import User from "../../features/User/User";

test('renders "Link with Reddit" link by default', () => {
  const { getByText } = render( 
    <provider store="{store}">
      <user></user>
    </provider>
  );

  expect(getByText('Link with Reddit')).toBeInTheDocument();
});

test('renders spinner while loading', () => {
  const { getByTestId } = render(
    <provider store="{store}">
      <user></user>
    </provider>
  );

  expect(getByTestId('spinner')).toBeInTheDocument();
});

    Primero, agregamos una nueva prueba llamada “renders spinner while loading”. En esta prueba, utilizamos la función getByTestId para consultar el componente por el atributo data-testid que agregamos al elemento SVG en el archivo User.js.

    <svg data-testid="spinner" classname="spinner" viewbox="0 0 50 50">

    Luego, usamos expect para afirmar que el elemento SVG está en el documento.

    expect(getByTestId('spinner')).toBeInTheDocument();

    Con esta prueba, ahora deberías poder verificar que el elemento SVG se renderiza mientras el componente se está cargando.

Comments are closed.