问在带有Jest的普通js中测试AJAX

EN

const QuoteModel = function(quote) {
    this.quote = quote;
    this.savedQuotes = [];
    this.quoteChanged = new Observer();
    this.quoteSaved = new Observer();
    this.quoteDeleted = new Observer();
};

QuoteModel.prototype.changeQuote = function(quote) {
    this.quote = quote;
    this.quoteChanged.notify(this.quote);
};

QuoteModel.prototype.fetchQuote = function(url, apiKey = null) {
    const xhr = new XMLHttpRequest();
    let data;

    // QuoteModel
    const self = this;

    xhr.onload = function() {

        if (xhr.status >= 200 && xhr.status < 300) {
            data = JSON.parse(this.response)[0];
            self.changeQuote(data);

        } else {
            data = 'Bad response';
        }

    };

    xhr.onerror = function() {
        data = 'Error fetching quote';
    };

    xhr.open('GET', url, true);

    if (apiKey != null) xhr.setRequestHeader('X-Mashape-Key', apiKey);

    xhr.send();

};

QuoteModel.prototype.getQuote = function() {
    return this.quote;
};

QuoteModel.prototype.tweet = function() {
    // Opens a tweet window..
};

QuoteModel.prototype.loadSavedQuotes = function() {
    // Load quotes from localStorage..
};

QuoteModel.prototype.saveQuote = function(quote) {
    // Saves quotes to localStorage..
};

import QuoteModel from '../js/QuoteModel';
import config from '../config.js';

const model = new QuoteModel({
    quote: 'I will never be quoted!',
    author: 'Michael Krøyserth-Simsø'
});

// https://stackoverflow.com/questions/28584773/xhr-testing-in-jest
const xhrMockClass = () => ({
    open: jest.fn(),
    send: jest.fn(),
    setRequestHeader: jest.fn(),
    status: 200,
    response: JSON.stringify([{
        quote: 'A fetched quote is as good as any quote.',
        author: 'Pelle the Cat'
    }])
});

window.XMLHttpRequest = jest.fn().mockImplementation(xhrMockClass);

// fetchQuote - ajax call to get quote is successfull
test('should make XMLHttpRequest to get new quote', () => {
    model.fetchQuote('https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous&count=10', config.API_KEY);
    expect(model.quote).toEqual({
        quote: 'A fetched quote is as good as any quote.',
        author: 'Pelle the Cat'
    });
});

 FAIL  test/QuoteModel.test.js
  ✕ should make XMLHttpRequest to get new quote (16ms)
  ✓ should have quote set (1ms)
  ✓ should change quote on request

  ● should make XMLHttpRequest to get new quote

    expect(received).toEqual(expected)

    Expected value to equal:
      {"author": "Pelle the Cat", "quote": "A fetched quote is as good as any quote."}
    Received:
      {"author": "Michael Krøyserth-Simsø", "quote": "I will never be quoted!"}

    Difference:

    - Expected
    + Received

      Object {
    -   "author": "Pelle the Cat",
    -   "quote": "A fetched quote is as good as any quote.",
    +   "author": "Michael Krøyserth-Simsø",
    +   "quote": "I will never be quoted!",
      }

      23 | test('should make XMLHttpRequest to get new quote', () => {
      24 |     model.fetchQuote('https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous&count=10', config.API_KEY);
    > 25 |     expect(model.quote).toEqual({
         |                         ^
      26 |         quote: 'A fetched quote is as good as any quote.',
      27 |         author: 'Pelle the Cat'
      28 |     });

      at Object.<anonymous> (test/QuoteModel.test.js:25:25)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 2 passed, 3 total
Snapshots:   0 total
Time:        1.985s
Ran all test suites matching /test\/QuoteModel.test.js/i.
npm ERR! Test failed.  See above for more details.