Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

208
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!