Блог

Я создал этот пользовательский хук для извлечения данных:

 const useSuggestionsApi = () => {
  const [data, setData] = useState({ suggestions: [] });
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
 
  useEffect(() => {
    const fetchData = () => {
      setError(false);
      setLoading(true);
      if(url) {
        fetch(url).then((res) => {
          if (res.status !== 200) {
            console.error(`It seems there was an problem fetching the result. Status Code: ${res.status}`)
            return;
          }
          res.json().then((fetchedData) => {
            setData(fetchedData)
          })
        }).catch(() => {
          setError(true)
        })
        setLoading(false);
      };
      }

    fetchData();
  }, [url]);
 
  return [{ data, loading, error }, setUrl];
}

export default useSuggestionsApi;
  

Он используется в этом компоненте для отображения ответа ( suggestions ).

 const SearchSuggestions = ({ query, setQuery}) => {
  const [{ data }, doFetch] = useSuggestionsApi(); 
  const { suggestions } = data;

  useEffect(() => {
    const encodedURI = encodeURI(`http://localhost:3000/search?q=${query}`);
    doFetch(encodedURI);
  }, [doFetch, query]);

  return (
    <div className="search-suggestions__container">
      <ul className="search-suggestions__list">
        {suggestions.map((suggestion) => {
          return (
          <li className="search-suggestions__list-item" key={uuid()}>
            <span>
              {suggestion.searchterm}
            </span>
          </li>
          )
        })}
      </ul>
    </div>
 );
};

export default SearchSuggestions;
  

Теперь я хотел бы написать некоторый модульный тест для SearchSuggestions компонента, но я не понимаю, как имитировать возвращенные данные useSuggestionApi . Я попытался импортировать useSuggestionApi как модуль, а затем издеваться над ответом, подобным этому, но безуспешно:

 describe('SearchSuggestions', () => {
  const wrapper = shallow(<SearchSuggestions/>)

  it('test if correct amount of list-item elements are rendered', () => {
    jest.mock("../hooks/useSuggestionsApi", () => ({
      useSuggestionsApi: () => mockResponse
    }));
    expect(wrapper.find('.search-suggestions__list').children()).toHaveLength(mockResponse.data.suggestions.length);
  });
})
  

Я новичок в тестировании компонентов React, поэтому очень благодарен за любой вклад!

Это работает:

 jest.mock('../hooks/useSuggestionsApi', () => {
  return jest.fn(() => [{data: mockResponse}, jest.fn()]
  )
})
describe('SearchSuggestions', () => {
  const wrapper = shallow(<SearchSuggestions query="jas"/>)

  it('correct amount of list-items gets rendered according to fetched data', () => {
    expect(wrapper.find('.search-suggestions__list').children()).toHaveLength(mockResponse.suggestions.length);
  });
})