Test API calling function

Question

I need to check the function fetchData(). I tried to follow these (and many other) tutorials and try to get it to work with my function for the past 3 hours, but no luck. I would prefer to do it differently because I don't think jQuery and React should be used together.

I really want to check if 1) the function is called when the search form has been submitted (the button in SearchForm is pressed) and 2) check if the data is returned.

Does anyone have any suggestions for getting started?

thank

home

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. , . fetchData() , this.nodes .

  const wrapper = shallow(<Home />);
  wrapper.instance().fetchData().then(() => {
    ... your assertions go here ...
  })
  

, Promise , .