Reddit Client: Testing issues

I’m using the regular Reddit API (not the JSON API) for my portfolio project. I’ve set up a User component that renders either a link to connect the app with Reddit, a loading spinner or the current user’s username depending on whether the data isLoading.

// User.js

import React from "react";
import { useSelector } from "react-redux";
import { selectUsername, selectAuthState } from "./userSlice";
import Reddit from "../../api/Reddit";

const User = () => {
    const userID = useSelector(selectUsername);
    const authState = useSelector(selectAuthState);
    const { isLoading } = useSelector(state => state.user)

    const handleAuth = (e) => {
        e.preventDefault();
        Reddit.getAccessToken();
    }

    if (isLoading) {
        return (
            <svg className="spinner" viewBox="0 0 50 50">
              <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
            </svg>
        )
    } else if (authState) {
        return (
            <a id="reddit-username" target="_blank" rel="noreferrer" href={`https://www.reddit.com/user/${userID}`} aria-label="Current user ID">{userID}</a>
        )
    } else {
        return (
            <a id="reddit-username" href="/" onClick={handleAuth} aria-label="Connect the web app with your Reddit account">Link with Reddit</a>
        )
    }
}

export default User;

I would like to test for the rendering of this component under the conditions specified (by default, whether it isLoading or whether authState has been set), as well as whether handleAuth() is called when the default link is clicked, but I’m struggling to write tests to achieve these. This is all I have so far.

// User.spec.js

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { Provider } from 'react-redux';
import { store } from '../../app/store';
import User from "../../features/User/User";

test("renders Reddit authentication link by default", () => {
    const { getByText } = render( 
        <Provider store={store}>
            <User />
        </Provider>
    );

    expect(getByText("Link with Reddit")).toBeInTheDocument();
});

Assistance with the rest of the tests would be greatly appreciated. The full codebase for my project can be found in this repository.

Eventually managed to finish the test suite. I initially thought I needed to mock API calls, but I really just needed to effect changes in state to produce the desired outcome in testing for each condition specified in User.

First of all, I had to pass handleAuth() down through props to be able to test a function call when the link is clicked:

// User.js
...

const User = props => {
    ...
    const { handleAuth } = props;

...

    else {
        return (
            <a id="reddit-username" href="/" onClick={handleAuth} aria-label="Connect the web app with your Reddit account">Link with Reddit</a>
        )
    }
}
// Header.js
...
const Header = () => {
    ...
    const handleAuth = (e) => {
        e.preventDefault();
        Reddit.getAccessToken();
    }

    return (
        ...
                <User handleAuth={handleAuth} />
        ...
    )
}

Then I was able to finish the test suite for the component:

// User.spec.js
...

test("renders Reddit authentication link by default", () => {
    render(
        <Provider store={store}>
            <User />
        </Provider>
    );

    expect(screen.getByText("Link with Reddit")).toBeInTheDocument();
});

test("calls handleAuth() when Reddit authentication link is clicked", () => {
    const handleAuthMock = jest.fn();

    render(
        <Provider store={store}>
            <User handleAuth={handleAuthMock} />
        </Provider>
    );

    userEvent.click(screen.getByText("Link with Reddit"));
    expect(handleAuthMock).toBeCalled();
});

test("displays SVG spinner while authentication is pending", () => {
    render(
        <Provider store={store}>
            <User />
        </Provider>
    );
    const authMock = () => {
        return { type: fetchUser.pending.type }
    }
    store.dispatch(authMock());

    expect(screen.getByTestId("loading")).toBeInTheDocument(); 
});

test("displays user's Reddit username when authentication is fulfilled", () => {
    render(
        <Provider store={store}>
            <User />
        </Provider>
    );
    const authMock = () => {
        return { type: fetchUser.fulfilled.type, payload: "User" }
    }
    store.dispatch(authMock());

    expect(screen.getByText("User")).toBeInTheDocument(); 
});