Acquiring access token crashes test.

[ErlendLygre]

Hi!

First of all: I love this library. Great work!

I'm currently implementing MSW in our app.

We're using Axios for the API-calls, we're using an axios interceptor to acquire an access token before each call.

Specifically, we're using MSAL 2.0, and running acquireTokenSilently before each request.

The token request, however, causes the test to crash before it is intercepted by the MSW server.

Does anyone know a good way to mock/bypass this token acquisition step in tests?

MetaTableCell.tsx

API.ts.
On submit, this API endpoint is called.

API.ts
The request is then intercepted by axios, attempting to get an access token

authService.ts
Token is requested by MSALs acquireTokenSilently. It needs an account passed into it. This is added to a global object after user logs in. If one is not provided, it will fail and redirect user to login screen.

MetaTableCell.test.tsx

setupServer.ts

The error message. I'm unable to pass a user account as the user is not logged in

[kettanaito]

Hey. @ErlendLygre! Thank you for the kind words!

Please, could you share some code snippets or, ideally, a minimal reproduction repo with this issue? That'd help us to get to the bottom of it much more efficiently.

The token request, however, causes the test to crash before it is intercepted by the MSW server.

Does the crash happen because of a failed token request, or there's something else? An error stack trace would be good to see.

[ErlendLygre]

Yes. I can't really paste it properly with the "insert code"-tool here, but I've uploaded screenshots to the original post now :)

[ErlendLygre]

Indeed it happens because of a failed token request. In the normal flow, the user is redirected to login whenever a token request fails.

[kettanaito]

Hey, @ErlendLygre. Do you mind marking this discussion as answered? It looks like the issue has been solved. Thanks.

[ErlendLygre]

I was able to solve this by mocking the auth service with

jest.mock('../../../../../services/authService');

and creating a mock directory with an authService.ts-file containing

export const getAccessToken = () => {
return Promise.resolve('Bearer test');
};

I'm new to mocking, and didn't realize I could mock an import of an import.

[kettanaito]

Thanks for sharing the screenshots, they are of great help.

I'm new to mocking, and didn't realize I could mock an import of an import.

Yes, you can. However, I'd rather you didn't. When you mock an entire authService your test no longer calls its code. But your production app will still do that. If you want to get more confidence from your test, you need to let that authService to execute, because it's a part of your app's logic. What you should be mocking is any HTTP requests your app or that service makes—those don't belong in a test and make it flaky.

I'll try to look into your use case once I have a spare minute. Meanwhile, anybody else is welcome to investigate!

[kettanaito]

@ErlendLygre, what happens if you remove the await auth.getAccesToken() call?

axios.interceptors.reques.use(async (request) => {
  try {
-   const token = await auth.getAccessToken()
+   const token = 'abc-123'
  }
})

Let's simplify the usage example to see if axios.interceptors is the issue. The exception above is originating during the auth token retrieval and doesn't look connected to MSW. Let's replace the token with a hard-coded value and see what happens.