测试调用API的函数

我需要测试fetchData()函数。我一直在尝试遵循this（以及其他许多）教程，并试图让它在过去的3个小时内与我的功能一起工作，但目前为止还没有运气。我最好还是想以另一种方式来做，因为我不认为jQuery和React应该一起使用。测试调用API的函数

我基本上想检查是否1）当提交搜索表单（SearchForm中的按钮被点击）时调用该函数并且2）检查数据是否返回。

有没有人有关于如何开始的建议？

感谢

首页

export default class Home extends Component { 
    constructor() { 
    super(); 
    this.state = { 
     value: '', 
     loading: false, 
     dataError: false 
    } 
    this.nodes = []; 
    this.fetchData = this.fetchData.bind(this); 

    } 
    fetchData(e) { 
    e.preventDefault(); 
    this.setState({loading: true}); 
    axios.get(`https://api.github.com/search/repositories?q=${this.state.value}`) 
    .then(res => { 
     this.nodes = res.data.items.map((d, k) => <RepoItem {...d} key={k}/>); 
     this.setState({loading: false}); 
    }) 
    .catch(err => { 
     this.setState({dataError: true}); 
    }); 
    } 
    render() { 
    return (
     <div className="home-wrapper"> 
     <SearchForm value={this.state.value} 
        onSubmit={this.fetchData} 
        onChange={(e) => this.setState({value: e.target.value})}/> 
     {this.state.loading ? 
     <Spinner/>: 
     !this.state.dataError ? this.nodes : 
     <h1>Oops! Something went wrong, please try again!</h1>} 
     </div> 
    ); 
    } 
}

RepoItem

export const RepoItem = props => (
    <div className="repo-item"> 
    <h1>{props.full_name}</h1> 
    </div>);

来源

2017-02-20 Apswak

不确定测试部分，但您可能想要将'this'绑定到您的fetchData函数，所以其中的this.setState引用Home部件。 – Mateusz

编辑：nvm我已经拥有了它，我只是删除了一些虚拟的组件。虽然谢谢！ – Apswak

嗯不知道为什么它的作品，但基本上，如果你在你的函数中引用它，然后将它传递给另一个组件，而不绑定'this'（在你的例子中是SearchForm），'this'将在调用时引用该组件，在SearchForm中更新状态，而不是Home。在你的例子中，你可以使用onChange事件的箭头函数来自动绑定到Home组件，所以this.setState（{value：e.target.value}正确地更新你的Home组件的状态。 – Mateusz

要检查功能，当表单提交时调用，您可以浅呈现<SearchForm>组件与spy功能通过作为onSubmit道具。模拟submit事件并检查是否调用了spy函数。
要检查数据是否返回，请模拟axios服务。您可以使用this library来模拟axios呼叫。拨打fetchData()，看看this.nodes和状态是否正确更新。
```
const wrapper = shallow(<Home />); 
wrapper.instance().fetchData().then(() => { 
    ... your assertions go here ... 
}) 
```

我认为这是永远是最好的做法，从那里异步动作发生的方法返回一个Promise对象或任何可链接的对象。

来源

2017-02-20 19:24:14

测试调用API的函数

回答

相关问题