Блог

Главная - Вопросы по программированию - тестирование функции с помощью вызова axios в react

тестирование функции с помощью вызова axios в react

#javascript #reactjs #jestjs #axios #enzyme

#javascript #reactjs #jestjs #axios #фермент

Вопрос:

Я пытался протестировать функцию, которая вызывает Axios, и возвращенные данные присваивались состоянию компонента React. Ниже приведен код, который я хотел протестировать

 class ViewBooking extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bookingId: "",
      bookingData: [],
      errorMessage: ""
    };
  }

fetchBookingbyID = () => {
    const { bookingId } = this.state;
    axios.get("http://localhost:4000/bookings/"   bookingId)
      .then(response => {
        this.setState({ bookingData: response.data});
      })
      .catch(error => {
        this.setState({
          errorMessage: "Details of " bookingId   " is not found!"
        });
      });
  }
}

Тестовый пример, который я написал, приведен ниже:

 test("Axios GET request : fetchBookingbyID", async () => {
    const wrapper = shallow(<ViewBooking />);
    var mock = new MockAdapter(axios);
    const mockData2 = {
      id: 1001,
      buffetName: "BBQ Special",
      emailId: "absy@gmail.com"
    };
    mock.onGet("http://localhost:4000/bookings/1001").reply(200, mockData2);
    wrapper.setState({ bookingId: 1001 });
    await wrapper.instance().fetchBookingbyID();
    expect(wrapper.state().bookingData).toEqual(mockData2)
  });

Теперь этот тестовый пример всегда проходит .. даже если я удаляю код, написанный в методе fetchBookingbyId().

Комментарии:

1. Я предложу вам тестировать не детали реализации вашего приложения, а поведение, то есть не знать о том факте, что существует вызов api с помощью axios для извлечения данных, но проверить, что после рендеринга компонента у него есть список элементов, источником которых является ответ api. Таким образом, ваши тесты не привязаны к конкретной реализации.

2. В таком случае, не придется ли мне постоянно поддерживать сервер в рабочем состоянии всякий раз, когда запускаются тестовые примеры, для проверки списка элементов

3. Это не связано, вам решать, хотите ли вы работать с реальным сервером или имитировать ответы api через какую-либо библиотеку, такую как Nock , fetchMock