Question

我需要测试fetchData()函数。我一直在尝试关注this（以及许多其他）教程并尝试在过去的3个小时内使用我的函数，但到目前为止还没有运气。我最好还是想以另一种方式做到这一点，因为我不认为jQuery和React应该一起使用。

我基本上想检查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>);

Answer 1

要检查是否在表单提交时调用了该函数，您可以浅显示<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对象或任何可链接对象始终是最佳做法。

测试调用API的函数

1 个答案: