Reactjs React中的模拟Axios请求

我正在React中为一个组件编写一个测试，该组件将显示一个目的地和一个IATA代码（机场代码）。到目前为止，我已经学习了多个教程，但目前测试只检测加载状态。如您所见，模拟API响应为空。我错过了什么

Destination.js：

import React from 'react';
import axios from 'axios';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { useQuery } from 'react-query';

const query = async (key) => {
  const { data } = await axios.get(
    `${process.env.REACT_APP_API_BASE_URL}${key}`
  );
  return data;
};

const Destination = ({ route, className }) => {
  const { status, data: result, error, isFetching } = useQuery(
    `/destinations/${route.destinations[0]}`,
    query,
    {
      staleTime: Infinity,
      cacheTime: Infinity,
    }
  );

  return (
    <>
      {isFetching ? (
        <span data-testid="loading" className={className}>
          Loading...
        </span>
      ) : error ? (
        <span className={className}>Error</span>
      ) : result ? (
        <span data-testid="resolved" className={className}>
          {result.city} ({result.iata})
        </span>
      ) : (
        <span data-testid="nodata" className={className}>
          No data
        </span>
      )}
    </>
  );
};

---

请流这个链接，我想有一个解决你的情况

import React from 'react';
import {
  render,
  cleanup,
  screen,
  waitForElement,
} from '@testing-library/react';
import { Destination } from './Destination';
import axiosMock from 'axios';

afterEach(cleanup);

describe('Destination', () => {
  it('Renders <Destination /> component', async () => {
    const route = { destinations: ['GVA'] };
    const url = `${process.env.REACT_APP_API_BASE_URL}/destinations/GVA`;

    axiosMock.get.mockResolvedValueOnce({
      result: { city: 'Geneva', iata: 'GVA' },
    });

    render(<Destination route={route} />);

    expect(screen.getByTestId('loading')).toHaveTextContent('Loading...');
    const spanResolved = await waitForElement(() =>
      screen.getByTestId('resolved')
    );
    expect(spanResolved).toHaveTextContent('Geneva (GVA)');

    expect(axiosMock.get).toHaveBeenCalledTimes(1);
    expect(axiosMock.get).toHaveBeenCalledWith(url);
  });
});

export default {
  get: jest.fn().mockResolvedValue({ result: {} }),
};