Я пытался протестировать функцию, которая вызывает вызов 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: "[email protected]"
};
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().
В этом случае мне не придется постоянно поддерживать работу сервера всякий раз, когда запускаются тестовые случаи, чтобы проверить список элементов



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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