Тестирование API-вызова внутри useEffect с использованием реагирующей-тестирующей библиотеки

Question

Я хочу проверить вызов API и возвращенные данные, которые должны отображаться внутри моего функционального компонента. Я создал компонент List, который выполняет вызов API. Я хотел бы, чтобы возвращенные данные отображались в компоненте, и я использую ловушку useState для этого. Компонент выглядит так:

const List: FC<{}> = () => {
    const [data, setData] = useState<number>();
    const getData = (): Promise<any> => {
        return fetch('https://jsonplaceholder.typicode.com/todos/1');
    };

    React.useEffect(() => {
        const func = async () => {
            const data = await getData();
            const value = await data.json();
            setData(value.title);
        }
        func();
    }, [])

    return (
        <div>
            <div id="test">{data}</div>
        </div>
    )
}

Я написал один тест, в котором я издевался над методом выборки. Я проверяю, был ли вызван метод fetch, и это действительно происходит. К сожалению, я не знаю, как я могу проверить значение, возвращаемое из ответа. Когда я пробую console.log, я просто получаю значение null и хочу получить «пример текста» Я предполагаю, что мне нужно ждать, пока это значение вернется из Promise. К сожалению, несмотря на попытки с методами действовать и ждать, я не знаю, как этого добиться. Вот мой тест:

it('test', async () => {
    let component;
    const fakeResponse = 'example text';
    const mockFetch = Promise.resolve({json: () => Promise.resolve(fakeResponse)});
    const mockedFetch = jest.spyOn(window, 'fetch').mockImplementationOnce(() => mockFetch as any )
    await wait( async () => {
        component = render(<List />);
    })
    const value: Element = component.container.querySelector('#test');
    console.log(value.textContent);
    expect(mockedFetch).toHaveBeenCalledTimes(1);
})

Буду очень благодарен за любые предложения.

Редактировать.

Также пробовал с waitForElement. Все еще получает нулевое значение.

const List: FC<{}> = () => {
    const [data, setData] = useState<string>('test');
    const getData = (): Promise<any> => {
        return fetch('https://jsonplaceholder.typicode.com/todos/1');
    };

    React.useEffect(() => {
        const func = async () => {
            const data = await getData();
            const value = await data.json();
            setData(value.title);
        }
        func();
    }, [])

    return (
        <div>
            <div data-testid="test" id="test">{data}</div>
        </div>
    )
}

и обновленный тест:

it('test', async () => {
    const fakeResponse = 'example text';
    const mockFetch = Promise.resolve({json: () => Promise.resolve(fakeResponse)});
    const mockedFetch = jest.spyOn(window, 'fetch').mockImplementationOnce(() => mockFetch as any )
    const { getByTestId } = render(<List />);
    expect(getByTestId("test")).toHaveTextContent("test");
    const resolvedValue = await waitForElement(() => getByTestId('test'));
    expect(resolvedValue).toHaveTextContent("example text");
    expect(mockedFetch).toHaveBeenCalledTimes(1);
})