Hay un componente funcional de React que quiero cubrir con las pruebas de Cypress:

 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;

y así es como estoy tratando de cubrir este componente con pruebas:

 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'); }); });

El primer escenario, donde data no están undefined y loading es true , se pasa con éxito. El segundo, donde necesito que data sean una matriz, no se pasa. ¿Cómo puedo simular data y loading para las pruebas de Cypress?