如何使用开玩笑和酶在内部使用多个API调用测试使用效果

Question

我想用两个API调用测试使用效果，如下所示。我如何嘲笑API致电或在这种情况下如何监视 Fetchcountry ＆amp; fetchstates 函数，然后如何

使用jest＆amp;酶

import React, { useEffect, useState } from "react";
import fetchCountry from "../fetchCountry";
import fetchState from '../fetchState';
const App = () => {

  const [country, setCountry] = useState();
  const [state, setStates] = useState();

  useEffect(() => {
    loadData()
  }, []);

 const loadData = async()=>{
  const country = await fetchCountry('Japan');
  const states = await fetchState(country.code)
 
  setCountry(country);
  setStates(states)
 } 

fetchcountry.js（虚拟实施）

const fetchCountry = (countryName) => {
    const requestOptions = {
      method: "GET",
      headers: { "Content-Type": "application/json" }
    };

    return fetch(`https://restcountries.com/v2/name/${countryName}`, requestOptions).then(res=>res.ok && res.json());
  };

export default fetchCountry;

fetchstate.js

const fetchState = (countryCode) => {
  const requestOptions = {
    method: "GET",
    headers: { "Content-Type": "application/json" }
  };

  return fetch(`https://restcountries.com/v2/name/${countryCode}`, requestOptions).then(res=>res.ok && res.json());
};

export default fetchState;

Answer 1

实际上，您不需要测试usestate钩子。它是React的一部分，已经由其维护者进行了测试。

让我们回到fetchcountry和fetchstate。

在您的测试中：

const fetchCountryMock = jest.spyOn(fetchCountry, 'default').mockImplementation();

const wrapper = mount(Component);

await flushPromises(); /* You can write your own implementation or use the library
function flushPromises() {
    return new Promise(resolve => setImmediate(resolve));
}
*/
expect(fetchCountryMock).toHaveBeenCalledWith('Japan');