XHR testing in Jest

前端 未结 6 2052
暖寄归人
暖寄归人 2020-12-05 18:41

I want to test AJAX methods (vanilla XHR) and I can\'t find the way to do it with Jest framework. I found mock-ajax.js for Jasmine, the problem

6条回答
  •  南方客
    南方客 (楼主)
    2020-12-05 19:20

    As mentioned you don't need additional libraries:

     // mocks.js is where you could put your mocks (example below)
     const mocks = require('./mocks.js')
    
     test('XHR test', () => {
       let xhrMock = {
          open: jest.fn(),
          setRequestHeader: jest.fn(),
          onreadystatechange: jest.fn(),
          send: jest.fn(),
          readyState: 4,
          responseText: JSON.stringify(mocks),
          status: 200
        }
    
       window.XMLHttpRequest = jest.fn(() => xhrMock)
    
       sendData().then((response) => {
          // You could do you checks here. Some examples:
          expect(xhrMock.setRequestHeader).toBeCalledWith('Cache-Control', 'no-cache')
          expect(xhrMock.open).toBeCalledWith('POST', 'you_api_url.com/end_point/')
          expect(xhrMock.withCredentials).toBe(false)
    
          let formData = new FormData()
          formData.append('firstParam', 'firstParamValue')  
    
          expect(yoloRequestMock.send).toBeCalledWith(formData)
          expect(JSON.stringify(response)).toBe(JSON.stringify(mocks))
       })
       // when onload is called, resolve and reject has been initialed.
       xhrMock.onreadystatechange()
    
        // the following function is the one which sends the request (to be tested)
        function sendData() {
           return new Promise(function(resolve, reject) {
             let formData = new FormData()
             formData.append('firstParam', 'firstParamValue')
             let xhr = new XMLHttpRequest()
             xhr.withCredentials = false
             xhr.onreadystatechange = function () {
               if (this.readyState === 4) {
                 if(xhr.status === 200) {
                   resolve(JSON.parse(xhr.responseText))
                 } else {
                   reject(xhr.responseText)
                 }
               }
             }
             xhr.open('POST', T2S_VISUAL_SEARCH_PARAMS.t2sVisualSeacchApiUrl)
             xhr.setRequestHeader("Cache-Control", "no-cache");
             xhr.send(formData)
           })
        }
      }
    

    The file mocks.js contains the mocks:

    module.exports =
      {
        response: {
          body: { ... }
        }
      }
    

提交回复
热议问题