如何在React中测试基于Context API与React Router的Spotify搜索API调用

我已经卡在这个问题上好几天了，急需帮助。我知道React测试应该关注实现结果（也就是用户看到的内容），而不是实现细节。用户输入搜索词并提交后，系统会发起API调用；调用成功后，页面通过react-router-dom跳转到新路由，在此路由中，获取到的数组将被映射并展示。该API调用在一个组件中执行，调用结果通过Context API传递至下一个组件。

API调用代码 #

export const spotifyTokenAndSearch = (query, state) => {

  spotifyToken
    .post("", {
      headers: {
        Authorization: clientMix,
      },
    })
    .then(({ data }) => {
      const accessToken = data;

      spotifyQuery
        .get("/search", {
          headers: {
            Authorization: accessToken,
          },
          params: { query },
        })
        .then(({ data }) => {
          state(data);
        });
    });
};

发起API调用的组件 #

import React, { useContext, useEffect } from "react";

const Search = () => {
  const {
    spotifyTokenAndSearch,
    term,
    setTerm,
    setSubmittedTerm,
    submittedTerm,
    setItems,
    navigate,
  } = useContext(SearchContext);

  const handleButtonClick = (term) => {
    setSubmittedTerm(term);
    spotifyTokenAndSearch(submittedTerm, setItems);
    navigate("/artists");
  };

  return (
    <main className="searchContainer container-fluid d-flex flex-column justify-content-center align-items-center">
      <form
        onSubmit={(e) => e.preventDefault()}>
          <div>
            <input
              role="search-all-input"
              value={term}
              onChange={({ target }) => setTerm(target.value)}
              type="text"
            />
          </div>
        <div>
          <button
            onClick={() => handleButtonClick(term)} 
            disabled={!term}
            type="button"
          >
            Artists
          </button>
        </div>
      </form>
    </main>
)}

映射API响应结果的组件 #

import React, {useContext} from "react";
import ArtistList from "./ArtistList";


const SearchList = () => {
  const {
    items
  } = useContext(SearchContext);

 const renderArtists = () => {
    if (items.length === 0) {
      return (
        <section>
          <div>
            <h2>Artists</h2>
          </div>
          <div>
            <div className="ui active centered inline loader"></div>
          </div>
        </section>
      );
    } else if (items.length > 0) {
      return (
        <section>
          <div>
            <h2>Artists</h2>
          </div>
          <ArtistList
            items={items}
          />
        </section>
      );
    }
  };

    return (
    <main>
      {renderArtists()}
    </main>
  );
};

内容的提问来源于stack exchange，提问作者userWantsToCode