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?