How can i test this?

[RodNik04]

Hi everyone, i'm currently learning testing with vitest, react-testing-library and MSW but i got stuck. I'm trying to test this component:

import React, { useEffect, useState } from "react";
import styles from "./HomeProject.module.scss";
import { Project, ProjectSlugs } from "../../../types/Projects";
import CardProject from "../../atoms/CardProject";
import { useRenderStars } from "../../../hooks/useRating";
import { useProjectsBySlugs } from "../../../hooks/useProject";

const HomeProject = (item: Project) => {
  const [isMobile, setIsMobile] = useState<boolean>(false);

  useEffect(() => {
          if (typeof window !== "undefined") {
        if (window.innerWidth < 600) {
        setIsMobile(true);
      } else {
        setIsMobile(false);
      }
    }
  }, []); 

  const slugs: ProjectSlugs[] = ["up-santa-fe", "agwa-bosques", "university-tower", "live-platon", "reserva-de-los-jinetes"];

  const project = useProjectsBySlugs(slugs);

  const starsComponent = useRenderStars(project[item.slug]?.rating || null);   

  return (
    <>
      <div className={styles.blackLayout}></div>
      <div
        style={{
          backgroundImage: isMobile
            ? `url(${project[item.slug]?.bgMobile})`
            : `url(${project[item.slug]?.bgHome})`,
          width: isMobile ? "unset" : 560,
          backgroundSize: "cover",
        }}
        className={styles.cardtop}
      >
        <div className={styles.titlesContainer}>
          <p className={styles.sub}>{project[item.slug]?.heroTitle}</p>
          <p className={styles.title}>{project[item.slug]?.city}</p>
        <div className={styles.starsContainer}>
            <div>
              <span className={styles.stars}>{starsComponent}</span>
            </div>
            {starsComponent && <span className={styles.levelSatisfaction}>Satisfacción de usuarios</span>}
          </div>
          <img alt="Scroll para conocernos" className={styles.arrow} src={"/assets/img/Flecha.svg"} />
        </div>
      </div>

      <CardProject item={item} home={true} />
    </>
  );
};

export default HomeProject;

and the main problem is that i don't know how to test if the data in {project[item.slug]?.heroTitle} is rendering (or if it's even posible). The hook useProjectsBySlugs gets the data from a slice of redux.

This is the hook:

import { ProjectSlugs } from "../types/Projects";
import { useSelector } from "react-redux";
import { AppState } from "../app/store";
import { selectProjectsBySlug } from "../features/projects/projectsSlice";

export function useProjectsBySlugs(slugs: ProjectSlugs[]) {
  const projects = useSelector((state: AppState) => selectProjectsBySlug(state, slugs));
  return projects;
}

and this is the slice:

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { Project, Unities } from "../../types/Projects";
import { AppState, AppThunk } from "../../app/store";
import { fetchProjectsFromAPI, fetchResidencialFromAPI } from "../../utils/apiUtils";

export interface ProjectState {
  projects: Project[];
  residencial: Project[];
  loading: boolean;
  error: string | null;
}

const initialState: ProjectState = {
  projects: [],
  residencial: [],
  loading: false,
  error: null,
};

export const projectSlice = createSlice({
  name: "project",
  initialState,
  reducers: {
    setProjects: (state, action: PayloadAction<Project[]>) => {
      state.projects = action.payload;
      state.loading = false;
      state.error = null;
    },
    setResidencial: (state, action: PayloadAction<Project[]>) => {
      state.residencial = action.payload;
      state.loading = false;
      state.error = null;
    },
    setLoading: (state, action: PayloadAction<boolean>) => {
      state.loading = action.payload;
    },
    setError: (state, action: PayloadAction<string>) => {
      state.error = action.payload;
      state.loading = false;
    },
  },
});

export const { setProjects, setResidencial, setLoading, setError } = projectSlice.actions;

export const selectProjectsBySlug = (state: AppState, slugs: string[]) => {
  const projectsBySlug: Record<string, Project> = {};
  for (const slug of slugs) {
    const project = state.project.projects.find(project => project.slug === slug);
    if (project) {
      projectsBySlug[slug] = project;
    }
  }
  return projectsBySlug;
};

export const fetchProjects = (): AppThunk => async (dispatch) => {
  try {
    dispatch(setLoading(true));
    const projects = await fetchProjectsFromAPI();
    const residencial = await fetchResidencialFromAPI(); 
    dispatch(setProjects(projects));
    dispatch(setResidencial(residencial));
  } catch (error) {
    dispatch(setError("Failed to fetch projects from API"));
  }
};

export const selectProjects = (state: AppState) => state.project.projects;
export const selectResidencial = (state: AppState) => state.project.residencial;
export const selectLoading = (state: AppState) => state.project.loading;
export const selectError = (state: AppState) => state.project.error;

export default projectSlice.reducer;