Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

207
Vistas
How to set the value of a React functional component's variable for Cypress test?

There is a React functional component which I want to cover with Cypress tests:

import { ReactElement, useEffect, VFC } from 'react';
import { finalize, Subscription } from 'rxjs';
import { WebAdminUserAccountManagementService } from '@stxr/admin_codecs';

import { setAllUsers, useAllUsers } from '@/gateway/users';

const AllUsers: VFC = (): ReactElement => {

  const { data, loading, error } = useAllUsers();

  const loadUsers = useCallback(() => {
    setAllUsers({
      loading: true,
    });

    const users: UserAccount[] = [];

    subscription = WebAdminUserAccountManagementService.getAllUserAccounts()
      .pipe(finalize(() => subscription?.unsubscribe()))
      .subscribe({
        next: (account) => users.push(account),
        complete: () => {
          setAllUsers({
            data: users,
            loading: false,
          });
        },
        error: (e) => {
          if (e === 'ErrorNotification/permissionDenied')
            return setAllUsers({
              loading: false,
              error: e,
            });

          return setAllUsers({
            loading: false,
            error: `Error loading users${e ? `: (${e})` : '.'}`,
          });
        },
      });
  }, []);

  useEffect(() => {
    loadUsers();
  }, [loadUsers]);

  if (loading || !data) return <Loading centered data-testid="loader" />;

  return <div data-testid="main-container">Hell yeeeeeaaah!<div/>
};

export default AllUsers;

and this is how I'm trying to cover this component with tests:

import { mount } from 'cypress/react';

import AllUsers from '@/pages/users/all';
import { setAllUsers } from '@/gateway/users';

describe('<AllUsers />', () => {
  it('should show loader if there is no data', () => {
    mount(<AllUsers />);

    cy.get('[data-testid="loader"]').should('be.visible');
  });

  it('should have main container if data exists', () => {
    setAllUsers({ loading: false, data: [] });
    mount(<AllUsers />);

    cy.get('[data-testid="main-container"]').should('be.visible');
  });
});

First scenario, where data is undefined and loading is true, is successfully passed. The second one, where I need data to be an array, is not passed. How can I mock data and loading for Cypress tests?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda