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.