Testing server actions in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a server action in Next.js?

A server action is a special function that runs on the server to handle tasks like data fetching or mutations, keeping sensitive logic away from the client.

intermediate

Why do we test server actions separately from client components?

Because server actions run only on the server, testing them separately ensures their logic works correctly without involving the UI or client environment.

beginner

Which testing tool is commonly used to test Next.js server actions?

Jest is commonly used to test server actions because it can run Node.js code and mock dependencies easily.

intermediate

How can you mock database calls in server action tests?

You can replace real database calls with mock functions that return fixed data, so tests run fast and don’t depend on a real database.

intermediate

What is one benefit of testing server actions with isolated unit tests?

Isolated unit tests catch bugs early by checking the server action’s logic alone, making debugging easier and faster.

Where do Next.js server actions run?

A In the browser console

B On the server only

C Both client and server

D On the client only

Server actions run only on the server to keep sensitive logic secure.

Which tool is best suited for testing Next.js server actions?

A Jest

B Cypress

C React Testing Library

D Storybook

Jest runs Node.js code and is ideal for testing server-side logic like server actions.

What should you do to test server actions that access a database?

A Mock the database calls

B Use the real database every time

C Test only the UI

D Skip testing server actions

Mocking database calls makes tests faster and independent from real databases.

Why is it important to test server actions separately from UI components?

A Because UI tests are slower

B Because UI components don’t need testing

C Because server actions are only for styling

D Because server actions run on the server and UI runs on the client

Server actions and UI run in different environments, so testing them separately ensures correctness.

What is a key benefit of unit testing server actions?

A Making the app load faster

B Improving UI animations

C Finding bugs early in server logic

D Reducing CSS file size

Unit tests focus on server logic to catch bugs early and simplify debugging.

Explain how you would write a test for a Next.js server action that saves user data.

Think about isolating the server action logic and avoiding real database calls.

What are the main reasons to test server actions separately from client components in Next.js?

Consider where the code runs and what each part does.

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