Question

我正在尝试测试调用google API的组件的方法。我的代码是下一个：

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方法，因为它调用了google api。是否有可能在测试环境中覆盖该功能以模拟对谷歌API的调用？

如果没有令牌，则该组件只会呈现登录按钮，如果没有，则会提供订阅按钮。

Answer 1

您可以使用存根替换对axios.post()的调用，该存根可以解析或拒绝您自己定义的测试用例。通过这种方式，您可以测试失败和成功请求的实现。看一下有助于嘲笑的sinon。请特别关注stub.resolves()和stub.rejects() in the stubs。

使用googleapi方法反应测试组件

1 个答案: