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

[maxpopovitch]

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?

[maxpopovitch]

Since mount returns Promise, I've found a way to call the functions I need in then, so please ignore my question.