Random Quote Generator - works but one test is getting "Timeout of 15000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves."

I am almost finished with the basic functionality of the Random Quote Generator. Even though it appears to work as desired, one of the tests is failing with the error “Timeout of 15000ms exceeded. For async tests and hooks, ensure “done()” is called; if returning a Promise, ensure it resolves.”

The test which fails is always the one testing the #author element. I am calling an API to get my random quotes. At first I was using jQuery $.get() but I’ve changed it to $.ajax() for the sole purpose of implementing .done() as the error message suggests, but can someone tell me if I’m doing something wrong?

Here is my code:

$(document).ready(function () {
  console.clear();
  const URL = "https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en";

  class RandomQuoteMachine extends React.Component {
    constructor(props) {
      super(props);
      this.URL = URL;
      this.getQuote = this.getQuote.bind(this);
      this.state = {
        quoteText: "",
        quoteAuthor: "",
        error: null
      };
    }

    componentDidMount() {
      this.getQuote();
    }
    
    getQuote() {
      let self = this;
      $.ajax({
        type: "GET",
        url: self.URL,
        dataType: "json"
      })
        .done(function (result, status, xhr) {
          self.setState({
            quoteText: result.quoteText,
            quoteAuthor: result.quoteAuthor
          });
        })
        .fail(function (xhr, status, error) {
          alert(
            "Result: " +
              status +
              " " +
              error +
              " " +
              xhr.status +
              " " +
              xhr.statusText
          );
        });
    }

    render() {
      return (
        <QuoteBox
          getQuote={this.getQuote}
          quoteText={this.state.quoteText}
          quoteAuthor={this.state.quoteAuthor}
        />
      );
    }
  }

  class QuoteBox extends React.Component {
    constructor(props) {
      super(props);
    }

    render() {
      return (
        <div id="quote-box">
          <Text quoteText={this.props.quoteText} />
          <Author quoteAuthor={this.props.quoteAuthor} />
          <NewQuote getQuote={this.props.getQuote} />
          <TweetQuote />
        </div>
      );
    }
  }

  class Text extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return <div id="text">"{this.props.quoteText}"</div>;
    }
  }

  class Author extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return <div id="author">--{this.props.quoteAuthor}</div>;
    }
  }

  class NewQuote extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        <button class="clickable" onClick={this.props.getQuote} id="new-quote">
          New Quote
        </button>
      );
    }
  }

  class TweetQuote extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        <a class="clickable" href="twitter.com/intent/tweet" id="tweet-quote">
          Tweet Quote
        </a>
      );
    }
  }

  ReactDOM.render(
    <RandomQuoteMachine />,
    document.getElementById("random-quote-machine")
  );
});

Also I’d like to point out that although the error message mentions 15000ms, the API call has not taken anywhere near that long to resolve and populate my elements at any time I’ve called it manually.