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

Question

经过多次研究，我从来没有找到一个具体的例子来帮助我理解这一点。我想要实现的目标：模拟 api 并测试它是否正确渲染。有人可以给我一个代码示例，看看如何用 jest 来具体测试它，这样我就可以将它应用到我项目中的所有其他函数中，我真的不明白怎么做。谢谢您的帮助。来自 api 文件夹的 REAL APIexport 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 GET return 创建了一个    {      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:    },    {}  ]};

Answer 1

如果您需要通过模拟方法调用的响应来测试您的功能searchTrack，您可以使用 jest 模拟轻松实现此目的。

可以使用简单的jest.fn().

您可以使用以下任一方法提供您自己的实现：

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

OR

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

由于您需要模拟 API 响应，因此您应该有一个返回 Promise 的模拟。

所以这样的事情应该做你的工作：

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

mockResolvedValueJest 还通过该函数为此提供了简写。

jest.fn().mockResolvedValue(data)

这也是一样的。此外，mockRejectedValue如果您还想测试错误场景，还有该方法。