Arrange-Act-Assert (AAA) Pattern

The Arrange-Act-Assert (AAA) pattern is a structured approach to writing unit tests that enhances readability and maintainability. It divides each test into three distinct sections:

1. Arrange: Set up the conditions and inputs required for the test.
2. Act: Execute the code or function being tested.
3. Assert: Verify that the outcome matches the expected result.

Why It’s a Best Practice

• Clarity: Clearly separating setup, execution, and verification makes tests easier to read and understand.
• Consistency: A uniform structure across tests simplifies writing and maintaining them.
• Maintainability: Well-organized tests are easier to update as the codebase evolves.
• Debugging Efficiency: Identifying where a test fails becomes straightforward.
• Single Responsibility: Encourages testing one functionality at a time, leading to more precise tests.

Examples in Practice

Example 1: Testing a Simple Function

Consider a function that calculates the factorial of a number:

function factorial(n) {
  if (n < 0) throw new Error('Negative input not allowed');
  return n === 0 ? 1 : n * factorial(n - 1);
}

Test Using AAA Pattern:

test('calculates factorial of a positive integer', () => {
  // Arrange
  const input = 5;
  const expectedOutput = 120;

  // Act
  const result = factorial(input);

  // Assert
  expect(result).toBe(expectedOutput);
});

Explanation:

• Arrange: Set up the input value and expected output.
• Act: Call the factorial function with the input.
• Assert: Check that the result matches the expected output.

Example 2: Testing Error Handling

Testing how a function handles invalid input:

function divide(a, b) {
  if (b === 0) throw new Error('Cannot divide by zero');
  return a / b;
}

Test Using AAA Pattern:

test('throws an error when dividing by zero', () => {
  // Arrange
  const numerator = 10;
  const denominator = 0;

  // Act and Assert
  expect(() => {
    divide(numerator, denominator);
  }).toThrow('Cannot divide by zero');
});

Explanation:

• Arrange: Initialize the numerator and set the denominator to zero.
• Act and Assert: Execute the function inside an assertion to check for the expected error.

Example 3: Testing Asynchronous Code

Suppose there’s an asynchronous function that fetches data from an API:

async function fetchData(url) {
  const response = await fetch(url);
  return response.json();
}

Test Using AAA Pattern:

test('fetches data successfully from an API', async () => {
  // Arrange
  const url = 'https://api.example.com/data';
  const mockData = { id: 1, name: 'Test Data' };
  global.fetch = vi.fn(() =>
    Promise.resolve({
      json: () => Promise.resolve(mockData),
    }),
  );

  // Act
  const data = await fetchData(url);

  // Assert
  expect(data).toEqual(mockData);
  expect(global.fetch).toHaveBeenCalledWith(url);

  // Cleanup
  global.fetch.mockClear();
  delete global.fetch;
});

Explanation:

• Arrange: Mock the fetch function to return predefined data.
• Act: Call the fetchData function.
• Assert: Verify that the returned data matches the mock data and that fetch was called with the correct URL.

Example 4: Testing a Class Method

Consider a simple Calculator class:

class Calculator {
  add(a, b) {
    return a + b;
  }
}

Test Using AAA Pattern:

test('adds two numbers correctly using Calculator class', () => {
  // Arrange
  const calculator = new Calculator();
  const num1 = 7;
  const num2 = 3;
  const expected = 10;

  // Act
  const result = calculator.add(num1, num2);

  // Assert
  expect(result).toBe(expected);
});

Explanation:

• Arrange: Create an instance of Calculator and set up the numbers.
• Act: Invoke the add method with the numbers.
• Assert: Check that the result equals the expected sum.

Example 5: Testing a Function with Side Effects

Suppose a function logs a message to the console:

function logMessage(message) {
  console.log(message);
}

Test Using AAA Pattern:

test('logs the correct message to the console', () => {
  // Arrange
  const consoleSpy = vi.spyOn(console, 'log');
  const message = 'Hello, World!';

  // Act
  logMessage(message);

  // Assert
  expect(consoleSpy).toHaveBeenCalledWith(message);

  // Cleanup
  consoleSpy.mockRestore();
});

Explanation:

• Arrange: Spy on the console.log method.
• Act: Call logMessage with a test message.
• Assert: Verify that console.log was called with the correct message.
• Cleanup: Restore the original console.log method.

Example 6: Testing Edge Cases

Testing a function that processes an array:

function getFirstElement(array) {
  if (!Array.isArray(array)) throw new Error('Input must be an array');
  return array[0];
}

Test Using AAA Pattern:

test('returns undefined for an empty array', () => {
  // Arrange
  const inputArray = [];
  const expectedOutput = undefined;

  // Act
  const result = getFirstElement(inputArray);

  // Assert
  expect(result).toBe(expectedOutput);
});

Explanation:

• Arrange: Prepare an empty array.
• Act: Call getFirstElement with the empty array.
• Assert: Verify that the result is undefined.

Example 7: Testing with Mock Service Worker (MSW)

Testing a function that makes an API call, using MSW to mock the network request:

// Function to fetch user data
async function getUser(id) {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Test Using AAA Pattern with MSW:

import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/users/:id', (req, res, ctx) => {
    const { id } = req.params;
    return res(ctx.json({ id, name: 'John Doe' }));
  }),
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('fetches user data successfully', async () => {
  // Arrange
  const userId = '123';

  // Act
  const user = await getUser(userId);

  // Assert
  expect(user).toEqual({ id: '123', name: 'John Doe' });
});

Explanation:

• Arrange: Set up MSW to intercept network requests and return mock data.
• Act: Call the getUser function with a test user ID.
• Assert: Verify that the returned user data matches the mock data.

Key Takeaways

With all of that said, here’s the gist:

• Separation of Concerns: The AAA pattern enforces a clear separation between setup, execution, and verification.
• Readability: Tests become self-explanatory, serving as documentation for the code’s expected behavior.
• Consistency: Following a standard pattern reduces cognitive load when switching between different tests or projects.
• Maintainability: Easier to update tests when changes occur in the codebase.
• Debugging Efficiency: Simplifies identifying where a test might be failing.