Testing for certain text using Vitest and React-Testing-Library after useEffect

Question

My Dashboard component which is the parent component of the TopCards component which in turn is parent component of the Card1 Component

import TopCards from "./Dashboard/TopCards";

const Dashboard = () => {
    useEffect(() => {
        dispatch(getDashboard(adminUrl))
            .then((result) => {
                console.log(result)
            })
            .catch((err) => {
                console.log(err.message)
            });
    }, []);
    return (
        <>
            <div className="md:pr-4">
                <BreadCrumb page={location.pathname} />
                <div className="md:mx-0 md:-ml-2">
                    <TopCards />
                </div>
            </div>
        </>
    );
};

export default Dashboard;

And My TopCards Component is

const TopCards = () => {
    const { profitability, earnings, monthSoFar } = useSelector((state) => state.dashboard);
    return 
        <div className="grid grid-cols-1">
            <div className="flex flex-col items-center ">
                <h1 className="mb-2 text-2xl  capitalize " data-testid="earnings">
                    Earnings
                </h1>
                <Card1 earnings={earnings} />
            </div>
        </div>
    );
};
export default TopCards;

And My Card1 Component is:

const Card1 = ({ earnings }) => {
    const { mtd, yesterday, lastMonth } = useMemo(() => earnings, [earnings]);
    return (
        <>
            <div className="w-72 large:w-60 h-48 rounded-[20px] bg-white shadow-md shadow-blue-gray-500 ">
                <h1 className="text-4xl text-based text-center font-bold pt-2">
                    {mtd === "-" ? "-" : mtd}
                </h1>
                <div className="text-base text-center text-secondary">Month to Date</div>
                <div className="mt-4 flex justify-evenly">
                    <div>
                        <p className="text-[32px] font-bold text-center text-based">
                            {yesterday === "-" ? "-" : yesterday}
                        </p>
                        <p className="text-base  text-center text-secondary">Yesterday</p>
                    </div>
                    <div className="w-[2px] h-16 bg-secondary"></div>
                    <div>
                        <p className="text-[32px] font-bold text-center text-based">
                            {lastMonth === "-" ? "-" : lastMonth}
                        </p>
                        <p className="text-base text-center text-secondary">Last Month</p>
                    </div>
                </div>
            </div>
        </>
    );
};

export default Card1;

Here what I am trying to do is that as soon as my dashboard component mounts I am fetching the dashboard data and by using useSelector from react-redux I am getting data in topCards component and passing it as prop to Card1 component to render. In Card1 component I am displaying "-" until data is being fetched then I am replacing it with the values received from api.

Now I want it to test using Vitest and React-testing-library that after the data I am getting for example "$3.45" as revenue as mtd in component.

it("should show $3.45 in topCard", async () => {
    screen.debug();
    render(<TopCards />);
    //expect(container.firstChild).toMatchSnapshot();
    await waitFor(() => {
        screen.debug();
        expect(screen.getByText("$3.45")).toBeInTheDocument();
    });
});

But I am not getting the data. On screen.debug() it shows the old elements which are intitally present and not updating after the useEffect() method. So where I am going wrong. I am using redux so I configured it like this

const render = (component) =>
    rtlRender(
        <Provider store={store}>
            <BrowserRouter>{component}</BrowserRouter>
        </Provider>
    );

Testing for certain text using Vitest and React-Testing-Library after useEffect

0 Answers0