Search code examples
reactjsunit-testingjestjsaxiosaxios-mock-adapter

The reason of usage axios-mock-adapter

I'm a beginner to test axios calls and started using axios-mock-adapter but I don't get why we use axios-mock-adapter.

mock.onPost('/api').reply(200, userData, headers);

In this code snippet, does the request really go to the server or is this just a simulation?

Because if I give wrong credentials, it responses with 200 status as I identify it on 'reply' to return 200.

So if I identify the response status, what is the reason to use it? If it doesn't really go to server, it seems like this is useless.

Maybe I miss something I don't know because I'm new but someone should put the light on this issue on my mind.

Solution

  • Answers to your questions

    In this code snippet, does the request really go to the server or is this just a simulation?

    It is just a simulation. No request is made, just the "reply" is returned. This is called mocking and is hugely popular and useful for writing tests.

    If you are new to different kinds of testing in general, this answer is well worth reading.

    If it doesn't really go to server, it seems like this is useless.

    If you want to test the system as a whole: i.e. your website + backend logic (like auth, data retrieval etc.) then yes, this is useless. But you would not use a mock for that.

    Integration tests typically are executed against a running system, they are valuable, but very hard to maintain and are generally slower to execute. You have to take care of not just your tests, but even the data.

    When would you use a mock

    Mocks are essential for unit testing your code. Mocks help isolate your front end code logic from the dynamic behavior. This makes it easier for you to simulate many scenarios without the overhead of maintaining data.

    Example Scenario

    Use Case In your application, you have to authenticate a user against a REST end point. It is expected that:

    1. When user is logged in successfully, Logout button is shown in the header.
    2. When users password has expired, a "change your password" screen is shown.
    3. When user has entered wrong credentials, a warning is shown
    4. When backend is not responding user is shown a screen to try again later

    Without mocks, you need to ensure that you have the exact data configured in your authentication system. From experience I can tell you it is hard, especially #2 & #4.

    But with mocks, you can just configure the mock to return the response you expect for each scenarios, in/before each it() block.

    This is also easier to maintain as expectation (assert/expect statements) is set near the test data (mock.reply()).