Javascript 如何模拟api以验证它是否'；s使用jest和fetch正确渲染

经过多次研究，我从来没有找到一个具体的例子来帮助我理解这一点

我想要实现的是：模拟api并测试它是否正确呈现

有没有人可以给我一个代码示例，看看如何用jest具体测试这个，这样我就可以把它应用到我项目中的所有其他函数中，我真的不知道怎么做

谢谢你的帮助

API文件夹中的真实API

export const searchTrack = search => {
  return fetch(
    `${url}/search/tracks?q=${encodeURIComponent(
      search
    )}&limit=250&media=music`,
    {
      method: "GET",
      headers: {
        Authorization: Cookies.get("token")
      }
    }
  )
    .then(response => {
      return response.json();
    })
    .then(jsonFormat => {
      return jsonFormat.results;
    })
    .catch(() => {
      console.error("fetch for search dont work");
    });
};

addTracksPlaylist.vue方法调用

  methods: {
    search() {
      if (this.term !== "") {
        this.results = [];
        this.searching = true;
        apiPlaylist
          .searchTrack(this.term)
          .then(res => {
            if (res.status != 401) {
              this.searching = false;
              this.results = res;
              this.noResults = this.results.length === 0;
            }
          })
          .catch(() => {
            this.$router.push("/login");
          });
      }
    }
  }

我看到每个人都在api文件夹中创建一个_mocks_____）文件夹，所以我用api创建了一个 获得回报

    {
      wrapperType: "track",
      kind: "song",
      artistId: 461932,
      collectionId: 196480323,
      trackId: 196480329,
      artistName: "Europe",
      collectionName: "The Final Countdown",
      trackName: "The Final Countdown",
      collectionCensoredName: "The Final Countdown",
      trackCensoredName: "The Final Countdown",
      artistViewUrl: "https://itunes.apple.com/us/artist/europe/id461932?uo=4",
      collectionViewUrl:
        "https://itunes.apple.com/us/album/the-final-countdown/id196480323?i=196480329&uo=4",
      trackViewUrl:
        "https://itunes.apple.com/us/album/the-final-countdown/id196480323?i=196480329&uo=4",
      previewUrl:
        "http://a1815.phobos.apple.com/us/r1000/101/Music/70/f0/fd/mzm.hhpjhkpl.aac.p.m4a",
      artworkUrl30:
        "http://a5.mzstatic.com/us/r30/Music/fc/4c/f5/mzi.jpmevzoi.30x30-50.jpg",
      artworkUrl60:
        "http://a4.mzstatic.com/us/r30/Music/fc/4c/f5/mzi.jpmevzoi.60x60-50.jpg",
      artworkUrl100:
        "http://a3.mzstatic.com/us/r30/Music/fc/4c/f5/mzi.jpmevzoi.100x100-75.jpg",
      collectionPrice: 9.99,
      trackPrice: 1.29,
      releaseDate: "1988-09-16T07:00:00Z",
      collectionExplicitness: "notExplicit",
      trackExplicitness: "notExplicit",
      discCount: 1,
      discNumber: 1,
      trackCount: 13,
      trackNumber: 1,
      trackTimeMillis: 310333,
      country: "USA",
      currency: "USD",
      primaryGenreName: "Rock",
      radioStationUrl: "https://itunes.apple.com/station/idra.196480329"
    },
    {}
  ]
};

---

如果需要模拟调用

searchTrack

方法的响应来测试函数，可以使用jest mock轻松实现

可以使用一个简单的

jest.fn（）

创建jest模拟

您可以使用以下任意一种方式为其提供自己的实现：

jest.fn(() => { //implementation goes here })

OR

jest.fn().mockImplementation(() => { //implementation goes here })

因为需要模拟API响应，所以应该有一个返回承诺的模拟

所以像这样的东西应该可以做你的工作：

jest.fn(() => Promise.resolve(mockDataValue))

Jest还通过

mockResolvedValue

函数对此进行了简化

jest.fn().mockResolvedValue(data)

这也是同样的道理。此外，如果您还想测试错误场景，还有

mockRejectedValue

方法

更多信息请访问