`onPost()` not mocking and returning actual Axios response

[FionaLMcLaren]

I originally posted on StackOverflow, but I didn't get any answers, and I have discovered a new side of this problem too. So, I thought I might have more luck finding a solution here!

I am trying to use axios-mock-adapter to mock the response I get when calling the Spotify API to request an access token. Here is the function that does just that...

export const discovery = {
  authorizationEndpoint: "https://accounts.spotify.com/authorize",
  tokenEndpoint: "https://accounts.spotify.com/api/token",
};
...

export const getTokenRequest = async (response: AuthSessionResult, request: AuthRequest) => {  
  const accessCode  = response.params.code;
  console.log("Successfully authorised user and obtained access code", accessCode);
  await AsyncStorage.setItem("code", accessCode);

  const codeVerifier = request?.codeVerifier || ""
  console.log("Successfully obtained code verifier from request", codeVerifier);
  await AsyncStorage.setItem("codeVerifier", codeVerifier);

  const data = {
    client_id: clientId,
    grant_type: "authorization_code",
    code: accessCode,
    redirect_uri: redirectUri,
    code_verifier: codeVerifier
  }

  try {
    const tokenResponse = await axios.post(
      discovery.tokenEndpoint,
      qs.stringify(data),
      { 
        headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        }
      })
    console.log("Successfully obtained token response", tokenResponse);

    storeAccessToken(tokenResponse);
    storeRefreshToken(tokenResponse);
  } catch(error) {
    console.log("Failed to obtain token request", error)
  }
}

...And here is my corresponding test...

  it("obtains an access code and a refresh token from the authorization code", async () => {
    const mockAxiosAdapter = new MockAdapter(axios);
    const mockTokenResponse = { data: { access_token: "DEF", refresh_token: "ABC" } };
    
    const authResult = { type: "success", params: { code: "123" } }
    const authRequest = { codeVerifier: "XYZ" }
 
    mockAxiosAdapter.onPost(AuthManager.discovery.tokenEndpoint).reply(200, mockTokenResponse);
    await AuthManager.getTokenRequest(authResult as AuthSessionResult, authRequest as AuthRequest);
    
    expect(AsyncStorage.setItem).toHaveBeenCalledWith("access_token", "DEF");
    expect(AsyncStorage.setItem).toHaveBeenCalledWith("refresh_token", "ABC");
  })
})

When running through this though, it does not seem that my mock post API call that I made is called, and instead, I get my tokenResponse being undefined. I debugged through it and it seems that my mock has been set up by axios-mock-adapter...

...And when I step into my function, it seems that everything has been set up alright on that front too...

What I did next was try to create an axios instance at the top of my mock file, like so...

import * as AuthManager from "@/src/helpers/AuthManager";


const axiosInstance = axios.create({
  baseURL: "https://api.spotify.com"
});
...

But this created a new problem. It seems that now that no mock is being called when I was onPost and an actual axios request is happening as I get this in the console

    console.log
      Failed to obtain token request AxiosError {
        message: 'Request failed with status code 400',
        name: 'AxiosError',
        code: 'ERR_BAD_REQUEST',
        config: {
          transitional: {
            silentJSONParsing: true,
            forcedJSONParsing: true,
            clarifyTimeoutError: false
          },
          adapter: [ 'xhr', 'http', 'fetch' ],
          transformRequest: [ [Function: transformRequest] ],
          transformResponse: [ [Function: transformResponse] ],
          timeout: 0,
          xsrfCookieName: 'XSRF-TOKEN',
          xsrfHeaderName: 'X-XSRF-TOKEN',
          maxContentLength: -1,
          maxBodyLength: -1,
          env: { FormData: [Function], Blob: [class Blob] },
          validateStatus: [Function: validateStatus],
          headers: Object [AxiosHeaders] {
            Accept: 'application/json, text/plain, */*',
            'Content-Type': 'application/x-www-form-urlencoded',
            'User-Agent': 'axios/1.7.7',
            'Content-Length': '99',
            'Accept-Encoding': 'gzip, compress, deflate, br'
          },
          method: 'post',
          url: 'https://accounts.spotify.com/api/token',
          data: 'client_id=8afd83aac5ea49d6a392d4890c73b156&grant_type=authorization_code&code=123&code_verifier=XYZ'
        },
        request: <ref *1> ClientRequest {
          _events: [Object: null prototype] {
            abort: [Function (anonymous)],
            aborted: [Function (anonymous)],
            connect: [Function (anonymous)],
            error: [Function (anonymous)],
            socket: [Function (anonymous)],
            timeout: [Function (anonymous)],
            finish: [Function: requestOnFinish]
          },
          _eventsCount: 7,
          _maxListeners: undefined,
          outputData: [],
          outputSize: 0,
          writable: true,
          destroyed: true,
          _last: false,
          chunkedEncoding: false,
          shouldKeepAlive: true,
          maxRequestsOnConnectionReached: false,
          _defaultKeepAlive: true,
          useChunkedEncodingByDefault: true,
          sendDate: false,
          _removedConnection: false,
          _removedContLen: false,
          _removedTE: false,
          strictContentLength: false,
          _contentLength: '99',
          _hasBody: true,
          _trailer: '',
          finished: true,
          _headerSent: true,
          _closed: true,
          socket: TLSSocket {
            _tlsOptions: [Object],
            _secureEstablished: true,
            _securePending: false,
            _newSessionPending: false,
            _controlReleased: true,
            secureConnecting: false,
            _SNICallback: null,
            servername: 'accounts.spotify.com',
            alpnProtocol: false,
            authorized: true,
            authorizationError: null,
            encrypted: true,
            _events: [Object: null prototype],
            _eventsCount: 9,
            connecting: false,
            _hadError: false,
            _parent: null,
            _host: 'accounts.spotify.com',
            _closeAfterHandlingError: false,
            _readableState: [ReadableState],
            _writableState: [WritableState],
            allowHalfOpen: false,
            _maxListeners: undefined,
            _sockname: null,
            _pendingData: null,
            _pendingEncoding: '',
            server: undefined,
            _server: null,
            ssl: [TLSWrap],
            _requestCert: true,
            _rejectUnauthorized: true,
            timeout: 5000,
            parser: null,
            _httpMessage: null,
            [Symbol(alpncallback)]: null,
            [Symbol(res)]: [TLSWrap],
            [Symbol(verified)]: true,
            [Symbol(pendingSession)]: null,
            [Symbol(async_id_symbol)]: -1,
            [Symbol(kHandle)]: [TLSWrap],
            [Symbol(lastWriteQueueSize)]: 0,
            [Symbol(timeout)]: Timeout {
              _idleTimeout: 5000,
              _idlePrev: [TimersList],
              _idleNext: [Timeout],
              _idleStart: 4481,
              _onTimeout: [Function: bound ],
              _timerArgs: undefined,
              _repeat: null,
              _destroyed: false,
              [Symbol(refed)]: false,
              [Symbol(kHasPrimitive)]: false,
              [Symbol(asyncId)]: 60,
              [Symbol(triggerId)]: 58
            },
            [Symbol(kBuffer)]: null,
            [Symbol(kBufferCb)]: null,
            [Symbol(kBufferGen)]: null,
            [Symbol(shapeMode)]: true,
            [Symbol(kCapture)]: false,
            [Symbol(kSetNoDelay)]: false,
            [Symbol(kSetKeepAlive)]: true,
            [Symbol(kSetKeepAliveInitialDelay)]: 1,
            [Symbol(kBytesRead)]: 0,
            [Symbol(kBytesWritten)]: 0,
            [Symbol(connect-options)]: [Object]
          },
          _header: 'POST /api/token HTTP/1.1\r\n' +
            'Accept: application/json, text/plain, */*\r\n' +
            'Content-Type: application/x-www-form-urlencoded\r\n' +
            'User-Agent: axios/1.7.7\r\n' +
            'Content-Length: 99\r\n' +
            'Accept-Encoding: gzip, compress, deflate, br\r\n' +
            'Host: accounts.spotify.com\r\n' +
            'Connection: keep-alive\r\n' +
            '\r\n',
          _keepAliveTimeout: 0,
          _onPendingData: [Function: nop],
          agent: Agent {
            _events: [Object: null prototype],
            _eventsCount: 2,
            _maxListeners: undefined,
            defaultPort: 443,
            protocol: 'https:',
            options: [Object: null prototype],
            requests: [Object: null prototype] {},
            sockets: [Object: null prototype] {},
            freeSockets: [Object: null prototype],
            keepAliveMsecs: 1000,
            keepAlive: true,
            maxSockets: Infinity,
            maxFreeSockets: 256,
            scheduling: 'lifo',
            maxTotalSockets: Infinity,
            totalSocketCount: 1,
            maxCachedSessions: 100,
            _sessionCache: [Object],
            [Symbol(shapeMode)]: false,
            [Symbol(kCapture)]: false
          },
          socketPath: undefined,
          method: 'POST',
          maxHeaderSize: undefined,
          insecureHTTPParser: undefined,
          joinDuplicateHeaders: undefined,
          path: '/api/token',
          _ended: true,
          res: IncomingMessage {
            _events: [Object],
            _readableState: [ReadableState],
            _maxListeners: undefined,
            socket: null,
            httpVersionMajor: 1,
            httpVersionMinor: 1,
            httpVersion: '1.1',
            complete: true,
            rawHeaders: [Array],
            rawTrailers: [],
            joinDuplicateHeaders: undefined,
            aborted: false,
            upgrade: false,
            url: '',
            method: null,
            statusCode: 400,
            statusMessage: 'Bad Request',
            client: [TLSSocket],
            _consuming: false,
            _dumped: false,
            req: [Circular *1],
            _eventsCount: 4,
            responseUrl: 'https://accounts.spotify.com/api/token',
            redirects: [],
            [Symbol(shapeMode)]: true,
            [Symbol(kCapture)]: false,
            [Symbol(kHeaders)]: [Object],
            [Symbol(kHeadersCount)]: 30,
            [Symbol(kTrailers)]: null,
            [Symbol(kTrailersCount)]: 0
          },
          aborted: false,
          timeoutCb: null,
          upgradeOrConnect: false,
          parser: null,
          maxHeadersCount: null,
          reusedSocket: false,
          host: 'accounts.spotify.com',
          protocol: 'https:',
          _redirectable: Writable {
            _events: [Object],
            _writableState: [WritableState],
            _maxListeners: undefined,
            _options: [Object],
            _ended: true,
            _ending: true,
            _redirectCount: 0,
            _redirects: [],
            _requestBodyLength: 99,
            _requestBodyBuffers: [],
            _eventsCount: 3,
            _onNativeResponse: [Function (anonymous)],
            _currentRequest: [Circular *1],
            _currentUrl: 'https://accounts.spotify.com/api/token',
            [Symbol(shapeMode)]: true,
            [Symbol(kCapture)]: false
          },
          [Symbol(shapeMode)]: false,
          [Symbol(kCapture)]: false,
          [Symbol(kBytesWritten)]: 0,
          [Symbol(kNeedDrain)]: false,
          [Symbol(corked)]: 0,
          [Symbol(kOutHeaders)]: [Object: null prototype] {
            accept: [Array],
            'content-type': [Array],
            'user-agent': [Array],
            'content-length': [Array],
            'accept-encoding': [Array],
            host: [Array]
          },
          [Symbol(errored)]: null,
          [Symbol(kHighWaterMark)]: 16384,
          [Symbol(kRejectNonStandardBodyWrites)]: false,
          [Symbol(kUniqueHeaders)]: null
        },
        response: {
          status: 400,
          statusText: 'Bad Request',
          headers: Object [AxiosHeaders] {
            date: 'Mon, 09 Sep 2024 09:23:50 GMT',
            'content-type': 'application/json',
            'x-request-id': 'c061dff4-e48e-41b4-bb8e-25d3d091ead4',
            'set-cookie': [Array],
            'sp-trace-id': '5017e63b841840d0',
            'x-envoy-upstream-service-time': '18',
            server: 'envoy',
            'strict-transport-security': 'max-age=31536000',
            'x-content-type-options': 'nosniff',
            vary: 'Accept-Encoding',
            via: 'HTTP/2 edgeproxy, 1.1 google',
            'alt-svc': 'h3=":443"; ma=2592000,h3-29=":443"; ma=2592000',
            'transfer-encoding': 'chunked'
          },
          config: {
            transitional: [Object],
            adapter: [Array],
            transformRequest: [Array],
            transformResponse: [Array],
            timeout: 0,
            xsrfCookieName: 'XSRF-TOKEN',
            xsrfHeaderName: 'X-XSRF-TOKEN',
            maxContentLength: -1,
            maxBodyLength: -1,
            env: [Object],
            validateStatus: [Function: validateStatus],
            headers: [Object [AxiosHeaders]],
            method: 'post',
            url: 'https://accounts.spotify.com/api/token',
            data: 'client_id=8afd83aac5ea49d6a392d4890c73b156&grant_type=authorization_code&code=123&code_verifier=XYZ'
          },
          request: <ref *1> ClientRequest {
            _events: [Object: null prototype],
            _eventsCount: 7,
            _maxListeners: undefined,
            outputData: [],
            outputSize: 0,
            writable: true,
            destroyed: true,
            _last: false,
            chunkedEncoding: false,
            shouldKeepAlive: true,
            maxRequestsOnConnectionReached: false,
            _defaultKeepAlive: true,
            useChunkedEncodingByDefault: true,
            sendDate: false,
            _removedConnection: false,
            _removedContLen: false,
            _removedTE: false,
            strictContentLength: false,
            _contentLength: '99',
            _hasBody: true,
            _trailer: '',
            finished: true,
            _headerSent: true,
            _closed: true,
            socket: [TLSSocket],
            _header: 'POST /api/token HTTP/1.1\r\n' +
              'Accept: application/json, text/plain, */*\r\n' +
              'Content-Type: application/x-www-form-urlencoded\r\n' +
              'User-Agent: axios/1.7.7\r\n' +
              'Content-Length: 99\r\n' +
              'Accept-Encoding: gzip, compress, deflate, br\r\n' +
              'Host: accounts.spotify.com\r\n' +
              'Connection: keep-alive\r\n' +
              '\r\n',
            _keepAliveTimeout: 0,
            _onPendingData: [Function: nop],
            agent: [Agent],
            socketPath: undefined,
            method: 'POST',
            maxHeaderSize: undefined,
            insecureHTTPParser: undefined,
            joinDuplicateHeaders: undefined,
            path: '/api/token',
            _ended: true,
            res: [IncomingMessage],
            aborted: false,
            timeoutCb: null,
            upgradeOrConnect: false,
            parser: null,
            maxHeadersCount: null,
            reusedSocket: false,
            host: 'accounts.spotify.com',
            protocol: 'https:',
            _redirectable: [Writable],
            [Symbol(shapeMode)]: false,
            [Symbol(kCapture)]: false,
            [Symbol(kBytesWritten)]: 0,
            [Symbol(kNeedDrain)]: false,
            [Symbol(corked)]: 0,
            [Symbol(kOutHeaders)]: [Object: null prototype],
            [Symbol(errored)]: null,
            [Symbol(kHighWaterMark)]: 16384,
            [Symbol(kRejectNonStandardBodyWrites)]: false,
            [Symbol(kUniqueHeaders)]: null
          },
          data: {
            error: 'invalid_grant',
            error_description: 'Invalid authorization code'
          }
        },
        status: 400
      }

      at Object.log (src/helpers/AuthManager.tsx:83:13)
          at Generator.throw (<anonymous>)

Here is also the history of my mockAxiosAdapter that shows that the post mock was not called...

Does anyone know what could be going on here? Thank you for any help!

[isocroft]

Hello @FionaLMcLaren , I think this error is happening because you are setting up the mock adapter in a NodeJS environment e.g Jest or Vitest (I don't know what testing framework you are using - so i am assuming).

Move the instantiation of the mock adapter to the file where your axios request is located. I think that should resolve it for you.

[ChinonsoO]

Getting a similar issue, where you able to resolve it @FionaLMcLaren

[robross0606]

I am having the same problems. I cannot get this project to mock anything at all. Even directly using the examples in the README with axios 1.8.4 don't appear to work for me.

[CocoTheCoder]

I am having the same problems. I cannot get this project to mock anything at all. Even directly using the examples in the README with axios 1.8.4 don't appear to work for me.

Make sure you aren't using something like jest.mock('axios') somewhere else. I ran into the same issue where it did not mock any of my requests and it was due to my mock still existing in my setupTests file.