Testing server actions in NextJS - Step-by-Step Execution

Concept Flow - Testing server actions

Write server action function

↓

Mock dependencies if needed

↓

Call server action in test

↓

Check returned result or side effects

↓

Pass or fail test

↓

End

This flow shows how to write and test a Next.js server action by calling it and checking its result or side effects.

Execution Sample

NextJS

export async function addUser(data) {
  // pretend to save user
  return { success: true, user: data };
}

// Test
(async () => {
  const result = await addUser({ name: 'Ana' });
  console.log(result);
})();

This code defines a server action that adds a user and returns success, then tests it by calling and logging the result.

Execution Table

Step	Action	Input	Output	Notes
1	Call addUser	{ name: 'Ana' }	Pending Promise	Function starts, async call begins
2	Inside addUser	{ name: 'Ana' }	Prepare return object	Simulate saving user
3	Return result	{ name: 'Ana' }	{ success: true, user: { name: 'Ana' } }	Promise resolves with result
4	Test receives result	Awaited result	{ success: true, user: { name: 'Ana' } }	Test can now check output
5	Log output	Result object	Printed to console	Shows test output
6	Test assertion	Result object	Pass if matches expected	Test passes if output is correct

💡 Test ends after checking the returned result matches expected output.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
data	undefined	{ name: 'Ana' }	{ name: 'Ana' }	{ name: 'Ana' }	{ name: 'Ana' }
result	undefined	undefined	Promise pending	{ success: true, user: { name: 'Ana' } }	{ success: true, user: { name: 'Ana' } }

Key Moments - 2 Insights

Why is the result a Promise at first and not the final object?

Because addUser is async, it returns a Promise immediately (see Step 1 and 3). The Promise resolves later with the final object (Step 3).

How do we check the result of the server action in the test?

We use await to get the resolved value from the Promise (Step 4), then compare it to the expected output (Step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'result' after Step 3?

A A pending Promise

B The final user object

C Undefined

D An error

💡 Hint

Check the 'result' variable in variable_tracker after Step 3 and the output column in execution_table Step 3.

At which step does the test receive the resolved result from the server action?

A Step 2

B Step 4

C Step 1

D Step 6

💡 Hint

Look at execution_table Step 4 where the test awaits the result.

If the server action returned an error instead of success, which step would change?

A Step 5 logging

B Step 1 input

C Step 3 output

D Step 6 test assertion

💡 Hint

Errors affect the returned output, so check Step 3 output in execution_table.

Concept Snapshot

Testing server actions in Next.js:
- Write async server action functions
- Call them in tests using await
- Check returned results or side effects
- Mock dependencies if needed
- Use assertions to confirm expected behavior

Full Transcript

This visual execution shows how to test Next.js server actions. First, you write an async function that performs a server task and returns a result. When testing, you call this function with test data. Because it is async, it returns a Promise initially. You await this Promise to get the final result. Then you check if the result matches what you expect. This process helps confirm your server actions work correctly before deploying.