Dependency injection using React Context

api.ts

export async function getWordsSoundingLike(word: string): Promise<{word: string}[]> {
    return await fetch(`https://api.datamuse.com/words?sl=${word}`)
        .then(response => response.json());
}

OtherPage.test.tsx

// taken from https://www.youtube.com/watch?v=MSpDAuDPqNw
import OtherPage from "./OtherPage";
import {fireEvent, render, screen, waitFor} from "@testing-library/react";
import {DataMuseApiContext} from "./SomeLayout";

describe('the page', () => {
    it('should do stuff', async () => {
        const logSpy = jest.spyOn(console, 'log') // never do that :p 
        render(<DataMuseApiContext.Provider value={{
                async getWordsSoundingLike(word: string) {
                    console.log('hello');
                    return [{word: 'hello'}];
                }
            }}><OtherPage/>
            </DataMuseApiContext.Provider>
        );
        const button = screen.getByRole('button')
        fireEvent.click(button)
        await waitFor(() => {
            expect(logSpy).toHaveBeenCalledWith('hello');
            const element = screen.getByText(/hello/i);
            expect(element).toBeInTheDocument();
        });
    });

});

OtherPage.tsx

"use client";

import {useDataMuseApiContext} from "./SomeLayout";
import {useState} from "react";

export default function OtherPage() {
    const dataMuseApi = useDataMuseApiContext();
    const [answer, setAnswer] = useState<string>("");
    if (!dataMuseApi) return null;
    return <div>
        <button onClick={
            async _event => {
                const words = await dataMuseApi.getWordsSoundingLike("dog")
                setAnswer(words[0].word)
                console.log(words)
            }}>Click me
        </button>
        {answer !== "" && <div> {answer} </div>}
    </div>
}