Testing server actions in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the server action correctly.

NextJS

import { [1] } from './actions';

Drag options to blanks, or click blank then click option'

AmyServerAction

BuseState

CfetchData

DhandleClick

Attempts:

3 left

💡 Hint

Common Mistakes

Importing client-side hooks like useState instead of the server action.

Using a wrong function name that is not exported.

The server action named myServerAction must be imported to use it in the component.

2fill in blank

medium

Complete the code to call the server action inside the component.

NextJS

async function handleSubmit() {
  await [1]();
}

Drag options to blanks, or click blank then click option'

AfetchData

BmyServerAction

CuseEffect

Dconsole.log

Attempts:

3 left

💡 Hint

Common Mistakes

Calling client-side hooks or console.log instead of the server action.

Forgetting to use await with the async server action.

The server action myServerAction is called asynchronously to perform server-side logic.

3fill in blank

hard

Fix the error in the test by completing the mock for the server action.

NextJS

jest.mock('./actions', () => ({
  myServerAction: jest.fn().mock[1](Promise.resolve('success'))
}));

Drag options to blanks, or click blank then click option'

AResolvedValue

BReturn

CRejected

DImplementation

Attempts:

3 left

💡 Hint

Common Mistakes

Using mockReturn instead of mockResolvedValue for async functions.

Using mockRejectedValue which simulates an error.

Use mockResolvedValue to mock a resolved promise for the server action.

4fill in blank

hard

Fill both blanks to check if the server action was called with the correct argument.

NextJS

expect(myServerAction).toHaveBeenCalledWith([1]);
expect(myServerAction).toHaveBeenCalledTimes([2]);

Drag options to blanks, or click blank then click option'

A{ id: 1 }

B1

C2

D{ user: 'test' }

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong argument objects that don't match the call.

Checking call count with wrong numbers.

The test checks that myServerAction was called once with the object { id: 1 }.

5fill in blank

hard

Fill all three blanks to complete the test that resets mocks and verifies the server action call.

NextJS

beforeEach(() => {
  [1]();
});

test('calls server action once', async () => {
  await myServerAction([2]);
  expect(myServerAction).toHaveBeenCalledTimes([3]);
});

Drag options to blanks, or click blank then click option'

Ajest.clearAllMocks

B{ id: 42 }

C1

Djest.resetModules

Attempts:

3 left

💡 Hint

Common Mistakes

Not clearing mocks before tests causing false positives.

Using wrong argument objects or call counts.

jest.clearAllMocks() resets mock call counts before each test. The server action is called with { id: 42 } and expected to be called once.

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