Mocking Axios Requests in Tests

In modern web development, testing is a crucial aspect of ensuring that applications work as intended. When dealing with external APIs, it is essential to test how your application handles various responses from these APIs. However, making actual network requests in tests can lead to inconsistent results and dependency on external services. This is where mocking comes into play.

Mocking allows developers to simulate external API requests, providing controlled and predictable responses. This makes tests more reliable and faster, as they do not depend on network availability or the behavior of third-party services. In this article, we will explore how to mock Axios requests in tests using Jest and Axios Mock Adapter. We’ll cover setting up the testing environment, mocking GET and POST requests, handling error responses, and advanced mocking techniques.

Understanding the Importance of Mocking in Tests

What is Mocking?

Mocking is a testing technique used to replace real objects or functions with simulated versions. These simulated versions mimic the behavior of the real objects, allowing developers to test specific scenarios and responses without relying on external dependencies. In the context of API requests, mocking involves simulating network requests and responses to test how an application handles different outcomes.

Benefits of Mocking Axios Requests

Consistency: Mocking provides consistent responses, making tests reliable and repeatable.
Speed: Mocked requests are faster than real network requests, reducing test execution time.
Isolation: Mocking isolates tests from external services, ensuring that failures in third-party APIs do not affect your tests.
Flexibility: Mocking allows you to simulate various scenarios, including error conditions, that may be difficult to reproduce with real requests.

Setting Up Your Testing Environment

Installing Necessary Packages

To get started with mocking Axios requests, you need to install the necessary packages. For this tutorial, we’ll use Jest, a popular testing framework, and Axios Mock Adapter, a library specifically designed for mocking Axios requests.

Using npm:

npm install jest axios axios-mock-adapter --save-dev

Using yarn:

yarn add jest axios axios-mock-adapter --dev

Basic Test Setup

Once the packages are installed, you can set up your test environment. Create a new directory for your tests and a configuration file for Jest if you haven’t already.

mkdir tests

In your package.json, add a test script:

"scripts": {
  "test": "jest"
}

Now, you’re ready to start writing tests.

Mocking Axios with Jest

Introduction to Jest

Jest is a powerful testing framework developed by Facebook. It provides a comprehensive suite of tools for writing and running tests, including built-in support for mocking.

Code Example: Mocking Axios GET Requests

To mock Axios GET requests with Jest, you need to use Jest’s jest.mock function to replace Axios with a mock implementation.

// fetchData.js
const axios = require('axios');

const fetchData = async () => {
  try {
    const response = await axios.get('/data');
    return response.data;
  } catch (error) {
    throw error;
  }
};

module.exports = fetchData;

// fetchData.test.js
const axios = require('axios');
const fetchData = require('./fetchData');

jest.mock('axios');

describe('fetchData function', () => {
  test('fetches successfully data from an API', async () => {

    const data = { data: 'some data' };
    axios.get.mockResolvedValue(data);

    const result = await fetchData();
    expect(result).toEqual('some data');

  });

  test('handles an error thrown by an API', async () => {

    const errorMessage = 'Network Error';
    axios.get.mockRejectedValue(new Error(errorMessage));

    await expect(fetchData()).rejects.toThrow(errorMessage);

  });

});

In this example, we have a fetchData function that makes a GET request to the /data endpoint. In the test file fetchData.test.js, we mock Axios using jest.mock('axios'). We then define two tests: one for a successful response and one for an error response.

In the successful response test, axios.get.mockResolvedValue is used to mock the resolved value of the GET request.
In the error response test, axios.get.mockRejectedValue is used to mock a rejected value.

These mocks ensure that the fetchData function behaves as expected under different scenarios.

Mocking Axios with Axios Mock Adapter

Introduction to Axios Mock Adapter

Axios Mock Adapter is a library specifically designed for mocking Axios requests. It provides a more detailed and flexible way to mock Axios requests and responses.

Code Example: Using Axios Mock Adapter for GET Requests

// fetchData.js
const axios = require('axios');

const fetchData = async () => {
  try {
    const response = await axios.get('/data');
    return response.data;
  } catch (error) {
    throw error;
  }
};

module.exports = fetchData;

// fetchData.test.js
const axios = require('axios');
const MockAdapter = require('axios-mock-adapter');
const fetchData = require('./fetchData');

const mock = new MockAdapter(axios);

test('fetches successfully data from an API', async () => {

  const data = { data: 'some data' };
  mock.onGet('/data').reply(200, data);

  const result = await fetchData();
  expect(result).toEqual('some data');

});

test('fetches erroneously data from an API', async () => {

  mock.onGet('/data').reply(500);

  await expect(fetchData()).rejects.toThrow();

});

In this example, we use Axios Mock Adapter to mock Axios requests in the fetchData.test.js file. We create a new instance of MockAdapter and pass Axios to it.

For the successful response test, we use mock.onGet('/data').reply(200, data) to specify that a GET request to /data should return a 200 status and the mock data.
For the error response test, we use mock.onGet('/data').reply(500) to specify that a GET request to /data should return a 500 status, indicating an error.

These mocks allow us to test the fetchData function with specific responses without making actual network requests.

Handling Different Scenarios in Mocked Requests

Mocking Error Responses

Mocking error responses is essential for testing how your application handles different error conditions. You can use Axios Mock Adapter to simulate various error scenarios.

Code Example: Handling Error Responses

// fetchData.js
const axios = require('axios');

const fetchData = async () => {
  try {
    const response = await axios.get('/data');
    return response.data;
  } catch (error) {
    throw error;
  }
};

module.exports = fetchData;

// fetchData.test.js
const axios = require('axios');
const MockAdapter = require('axios-mock-adapter');
const fetchData = require('./fetchData');

const mock = new MockAdapter(axios);

test('handles 404 error', async () => {

  mock.onGet('/data').reply(404);

  await expect(fetchData()).rejects.toThrow('Request failed with status code 404');

});

test('handles network error', async () => {

  mock.onGet('/data').networkError();

  await expect(fetchData()).rejects.toThrow('Network Error');

});

In this example, we use Axios Mock Adapter to mock different error responses.

For the 404 error test, we use mock.onGet('/data').reply(404) to simulate a 404 Not Found error.
For the network error test, we use mock.onGet('/data').networkError() to simulate a network error.

These tests ensure that the fetchData function correctly handles different error conditions.

Advanced Mocking Techniques

Mocking Interceptors

Interceptors are often used in Axios to modify requests or responses. Mocking interceptors can be useful for testing how your application handles these modifications.

Code Example: Mocking Interceptor Behavior

// fetchData.js
const axios = require('axios');

const apiClient = axios.create();

apiClient.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token';
  return config;
});

const fetchData = async () => {

  try {
    const response = await apiClient.get('/data');
    return response.data;
  } catch (error) {
    throw error;
  }

};

module.exports = fetchData;

// fetchData.test.js
const axios = require('axios');
const MockAdapter = require('axios-mock-adapter');
const fetchData = require('./fetchData');

const mock = new MockAdapter(axios);

test('handles request interceptor', async () => {
  mock.onGet('/data').reply(config => {

    expect(config.headers.Authorization).toBe('Bearer token');
    return [200, { data: 'some data' }];

  });

  const result = await fetchData();
  expect(result).toEqual('some data');

});

In this example, we create an Axios instance with a request interceptor that adds an authorization header. In the test, we mock the GET request and check if the Authorization header is correctly set by the interceptor.

The mock.onGet('/data').reply(config => { ... }) function allows us to inspect the request configuration and verify that the interceptor works as expected.

This test ensures that the request interceptor is correctly modifying the request before it is sent.

Conclusion

In this article, we explored how to mock Axios requests in tests using Jest and Axios Mock Adapter. We covered setting up the testing environment, mocking GET and POST requests, handling error responses, and advanced mocking techniques like interceptors. Properly mocking Axios requests helps create reliable, fast, and isolated tests, ensuring that your application behaves as expected under various scenarios.

The examples and concepts discussed provide a solid foundation for mocking Axios requests in your projects. I encourage you to experiment with different mocking techniques and scenarios to thoroughly test your application’s API interactions. Effective mocking is essential for building robust and maintainable web applications.

Additional Resources

To continue your learning journey with Axios and testing, here are some additional resources:

Axios Documentation: The official documentation provides comprehensive information and examples. Axios Documentation
Jest Documentation: Learn more about Jest and its powerful testing features. Jest Documentation
Axios Mock Adapter: Detailed information on using Axios Mock Adapter for mocking requests. Axios Mock Adapter
Testing Asynchronous Code: Best practices for testing asynchronous JavaScript code. MDN Web Docs – Testing Asynchronous Code
Mock Service Worker: Another tool for mocking network requests in tests. Mock Service Worker