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!