I am trying to mock my React functional component and test if the results of an API call are being rendered properly. I can see on the page that everything is working, but I've been asked to write a test for "business logic".

The page gets an array of objects from the api, then maps over them to generate Post-Previews.

The API call happens in the first render (in useEffect), and the first six results are visible. There are six elements with the class name "Post-Preview" on the page at that point.

My first question is: What does "business logic" mean in the context of a React App? My second question is: How can I make a test which actually renders the page in response to the API call? The dummyData here is an array of six objects, copied directly from the real API.

test("Renders the page", async () => {
    act(() => {
        mockedAxios.get.mockResolvedValue({ data: dummyData });
        ReactDOM.render(<App />, container);
    });
    expect(container.innerHTML).toContain("climate");     // This test passes

});

test("Renders the results of the API call", async () => {
    mockedAxios.get.mockResolvedValue({ data: dummyData });
    act(() => {
        ReactDOM.render(<App />, container);
    });
    const postPreview = container.getElementsByClassName("Post-Preview");
    console.log(postPreview);                             // Returns empty HTMLCollection
});