我想测试 api 调用和返回的数据，这些数据应该显示在我的功能组件中。我创建了执行 api 调用的 List 组件。我希望返回的数据显示在组件中，为此我使用了 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 方法。我检查 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);
})

我真的很感激任何建议。

第二次尝试

也尝试使用data-testid="test"and waitForElement，但仍然收到空值。

更新的组件增量：

  const List: FC<{}> = () => {
-     const [data, setData] = useState<number>();
+     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 id="test">{data}</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);
})