How to Test Server Action in Next.js: Simple Guide

To test a server action in Next.js, write unit tests that call the action function directly in a Node.js environment using testing tools like Jest. Mock any external dependencies and verify the returned results or side effects without rendering UI components.

Syntax

A server action in Next.js is an async function exported from a component or module that runs on the server. To test it, you import the function and call it directly in your test file.

Key parts:

• export async function actionName(params): Defines the server action.
• Call the action in tests like a normal async function.
• Mock dependencies like database calls or APIs.

javascript

export async function addUser(data) {
  // server-side logic
  const savedUser = await database.save(data);
  return savedUser;
}

// In test file
import { addUser } from './actions';

test('adds user correctly', async () => {
  const result = await addUser({ name: 'Alice' });
  expect(result.name).toBe('Alice');
});

Example

This example shows how to test a Next.js server action that adds a user. It mocks the database call and checks the returned user data.

javascript

import { addUser } from './actions';

// Mock database module
jest.mock('./database', () => ({
  save: jest.fn(async (data) => ({ id: 1, ...data }))
}));

import { save } from './database';

test('addUser returns saved user with id', async () => {
  const userData = { name: 'Alice' };
  const result = await addUser(userData);

  expect(save).toHaveBeenCalledWith(userData);
  expect(result).toEqual({ id: 1, name: 'Alice' });
});

Output

PASS  addUser returns saved user with id

Common Pitfalls

Common mistakes when testing server actions in Next.js include:

• Trying to test server actions by rendering components instead of calling the function directly.
• Not mocking external dependencies like databases or APIs, causing tests to fail or be slow.
• Mixing client-side and server-side code in tests, which can cause environment errors.

Always isolate server actions and test them as plain async functions.

javascript

/* Wrong: Testing server action by rendering component */
// This will not test the server action logic directly
render(<MyComponent />);

/* Right: Call server action directly and mock dependencies */
(async () => {
  const result = await addUser({ name: 'Bob' });
  expect(result.name).toBe('Bob');
})();

Quick Reference

Tips for testing Next.js server actions:

• Import and call server actions directly in tests.
• Use jest.mock() to mock external services.
• Write tests in Node.js environment (no browser needed).
• Check returned data or side effects.
• Keep server action logic pure and testable.

Key Takeaways

Test Next.js server actions by calling them directly as async functions.

Mock external dependencies like databases or APIs to isolate tests.

Avoid testing server actions through UI rendering; test logic separately.

Use Jest or similar tools in a Node.js environment for server action tests.

Keep server actions simple and pure for easier testing.