Testing server actions in NextJS

Introduction

Testing server actions helps make sure your backend code works correctly before users see it. It catches mistakes early and keeps your app reliable.

When you want to check if a server action correctly saves data to a database.

When you need to verify that a server action returns the right response for different inputs.

When you want to prevent bugs by testing server logic before deploying.

When you want to automate tests to run every time you update your code.

When you want to simulate user interactions that trigger server actions.

Syntax

NextJS

import { describe, it, expect } from 'vitest';
import { myServerAction } from './actions';

describe('myServerAction', () => {
  it('should return expected result', async () => {
    const inputData = {}; // define inputData appropriately
    const expectedOutput = {}; // define expectedOutput appropriately
    const result = await myServerAction(inputData);
    expect(result).toEqual(expectedOutput);
  });
});

Use describe to group related tests.

Use it to define a single test case.

Examples

This tests if the addUser server action adds a user and returns success.

NextJS

import { it, expect } from 'vitest';
import { addUser } from './actions';

it('adds a user successfully', async () => {
  const user = { name: 'Alice' };
  const response = await addUser(user);
  expect(response.success).toBe(true);
});

This checks that deleting a post with a wrong ID returns an error.

NextJS

import { it, expect } from 'vitest';
import { deletePost } from './actions';

it('fails to delete non-existing post', async () => {
  const response = await deletePost('invalid-id');
  expect(response.error).toBeDefined();
});

Sample Program

This example shows a simple server action greet that returns a greeting message or an error. The tests check both cases.

NextJS

import { it, expect } from 'vitest';

// Example server action
export async function greet(name) {
  if (!name) return { error: 'Name is required' };
  return { message: `Hello, ${name}!` };
}

// Test for the greet server action
it('returns greeting message when name is provided', async () => {
  const result = await greet('Bob');
  expect(result).toEqual({ message: 'Hello, Bob!' });
});

it('returns error when name is missing', async () => {
  const result = await greet('');
  expect(result).toEqual({ error: 'Name is required' });
});

Important Notes

Server actions run on the server, so tests should run in a Node.js environment.

Use async/await to handle server actions that return promises.

Keep tests small and focused on one behavior at a time.

Summary

Testing server actions helps catch bugs early and keeps your backend reliable.

Use testing tools like Vitest to write simple tests for your server actions.

Write tests for both success and error cases to cover all possibilities.

Practice

1. What is the main purpose of testing server actions in Next.js?

easy

A. To catch bugs early and ensure backend reliability

B. To improve frontend styling and layout

C. To speed up client-side rendering

D. To reduce the size of JavaScript bundles

Solution

1. Step 1: Understand server actions role

   Server actions handle backend logic and data processing in Next.js.

2. Step 2: Identify testing benefits

   Testing server actions helps find bugs early and keeps backend code reliable.

3. Final Answer:

   To catch bugs early and ensure backend reliability -> Option A

4. Quick Check:

   Testing server actions = catch bugs early [OK]

Hint: Testing server actions = backend reliability focus [OK]

Common Mistakes:

• Confusing server action testing with frontend styling
• Thinking testing speeds up rendering
• Assuming testing reduces bundle size

2. Which of the following is the correct way to import a server action for testing in Next.js using Vitest?

easy

A. require('myAction') from '@/app/actions';

B. const myAction = import('@/app/actions');

C. import myAction from 'vitest';

D. import { myAction } from '@/app/actions';

Solution

1. Step 1: Recall ES module import syntax

   Next.js and Vitest use ES modules, so import uses 'import { name } from path'.

2. Step 2: Check each option

   import { myAction } from '@/app/actions'; uses correct syntax. require('myAction') from '@/app/actions'; mixes require and import wrongly. import myAction from 'vitest'; imports from wrong module. const myAction = import('@/app/actions'); uses dynamic import incorrectly for testing.

3. Final Answer:

   import { myAction } from '@/app/actions'; -> Option D

4. Quick Check:

   Correct ES import syntax = import { myAction } from '@/app/actions'; [OK]

Hint: Use ES module import syntax for server actions [OK]

Common Mistakes:

• Using CommonJS require instead of import
• Importing from wrong module
• Using dynamic import without await

3. Given this server action test code snippet, what will be the output?

import { describe, it, expect } from 'vitest';
import { addNumbers } from '@/app/actions';

describe('addNumbers', () => {
  it('adds two numbers correctly', () => {
    const result = addNumbers(2, 3);
    expect(result).toBe(5);
  });
});

medium

A. Test fails because addNumbers returns a string

B. Test fails because addNumbers is asynchronous

C. Test passes because 2 + 3 equals 5

D. Test throws syntax error due to missing async

Solution

1. Step 1: Analyze the test function

   The test calls addNumbers(2, 3) and expects 5.

2. Step 2: Check function behavior

   If addNumbers adds numbers synchronously, result is 5, so test passes.

3. Final Answer:

   Test passes because 2 + 3 equals 5 -> Option C

4. Quick Check:

   2 + 3 = 5 test passes [OK]

Hint: Check if function returns expected value synchronously [OK]

Common Mistakes:

• Assuming function is async without evidence
• Confusing return types
• Expecting syntax errors without cause

4. You wrote this test for a server action but it fails with a runtime error. What is the likely cause?

import { it, expect } from 'vitest';
import { fetchData } from '@/app/actions';

it('fetches data successfully', () => {
  const data = fetchData();
  expect(data).toHaveProperty('id');
});

medium

A. expect syntax is invalid for property check

B. fetchData is asynchronous but test lacks async/await

C. fetchData is not imported correctly

D. vitest cannot test server actions

Solution

1. Step 1: Identify function type

   fetchData likely returns a Promise because it fetches data asynchronously.

2. Step 2: Check test function

   Test does not use async/await, so it tries to check a Promise directly, causing runtime error.

3. Final Answer:

   fetchData is asynchronous but test lacks async/await -> Option B

4. Quick Check:

   Async function needs async/await in test [OK]

Hint: Async server actions need async/await in tests [OK]

Common Mistakes:

• Forgetting async keyword in test
• Checking Promise directly without await
• Assuming import error without evidence

5. You want to test a server action that creates a user and returns the user ID. The action throws an error if the username is empty. Which test cases should you write to cover both success and error scenarios?

hard

A. Test with a valid username expecting an ID, and test with empty username expecting an error

B. Test only with a valid username expecting an ID

C. Test with empty username expecting a success response

D. Test with invalid username expecting a null return

Solution

1. Step 1: Identify success scenario

   Valid username should create user and return ID, so test this case.

2. Step 2: Identify error scenario

   Empty username causes error, so test that error is thrown properly.

3. Final Answer:

   Test with a valid username expecting an ID, and test with empty username expecting an error -> Option A

4. Quick Check:

   Cover success and error cases in tests [OK]

Hint: Always test success and error cases for server actions [OK]

Common Mistakes:

• Testing only success cases
• Expecting success on invalid input
• Ignoring error throwing behavior