Тестовый компонент React с методом googleapi

Я пытаюсь протестировать метод компонента, который вызывает API Google. Мой код следующий:

export default class SubscribeYoutube extends Component {
state = {
    gToken: null
    /*Token obtained after login*/
}
onSubscribe() {
    axios.post('https://www.googleapis.com/youtube/v3/subscriptions?part=snippet&alt=json', {
        "snippet": {
            "resourceId":
                {
                    "channelId": "QuanticoTrends",
                    "kind": "youtube#channel"
                }
        }
    }, {
            headers: {
                "Authorization": this.state.gToken
            }
        })
        .then((response) => {
            this.props.setComplete()
        })
        .catch(error => { })
}
render() {
    return <div>
        {this.state.gToken ?
           <button onClick = {this.onSubscribe.bind(this)}>Subscribe</button> 
           :
           <GoogleLogin
                clientId = "***clientId***"
                onSuccess = {saveTokenInState}
                onFailure = {handleError}
                isSignedIn
                tag = "span"
                type = ""
                scope = "profile email https://www.googleapis.com/auth/youtube https://www.googleapis.com/auth/youtube.force-ssl"/>}
    </div>
}

Моя проблема в том, что я не могу понять, как протестировать метод onSubscribe, потому что он вызывает API Google. Можно ли переопределить эту функцию в тестовой среде для имитации вызова API Google?

Компонент просто отображает кнопку входа в систему, если у нее нет токена, и кнопку подписки, если она есть.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете заменить вызов axios.post() заглушкой, которая разрешает или отклоняет что-то определенное вами для этих тестовых случаев. Таким образом, вы можете проверить свою реализацию на неудачный и успешный запрос. Взгляните на синон, который помогает с издевательством. Особенно обратите внимание на stub.resolves() и stub.rejects()в заглушках.

Другие вопросы по теме