Testing server components in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the testing library for server components in Next.js.

NextJS

import { renderToString } from '[1]';

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

Areact-dom/server

Bnext/testing

Creact/testing-library

Dnext/server

Attempts:

3 left

💡 Hint

Common Mistakes

Using client-side testing libraries like 'react/testing-library'.

Importing from 'next/testing' which does not exist.

Next.js server components are tested by rendering them to a string using renderToString from react-dom/server.

2fill in blank

medium

Complete the code to render a server component called to a string.

NextJS

const output = renderToString([1]);

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

A<MyComponent />

BMyComponent()

CReact.createElement(MyComponent)

Drender(<MyComponent />)

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the component as a function instead of using JSX.

Using client-side render functions like 'render()'.

To render a server component to string, you pass the JSX element <MyComponent /> to renderToString.

3fill in blank

hard

Fix the error in this test code by completing the blank with the correct assertion method.

NextJS

expect(output).[1]('Hello Server Component');

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

AtoBe

BtoMatchObject

CtoEqual

DtoContain

Attempts:

3 left

💡 Hint

Common Mistakes

Using toBe which checks exact equality.

Using toMatchObject which is for objects, not strings.

Since output is a string of rendered HTML, toContain checks if the string includes the expected text.

4fill in blank

hard

Fill both blanks to import and test a server component named <Greeting> that takes a 'name' prop.

NextJS

import Greeting from '[1]';

const output = renderToString(<Greeting name=[2] />);

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

A'./components/Greeting'

B'../components/Greeting'

C'./Greeting'

D'Alice'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect relative paths.

Passing the prop without quotes, causing a reference error.

The component is imported from a relative path '../components/Greeting'. The 'name' prop is a string, so it should be passed as a string literal.

5fill in blank

hard

Fill all three blanks to write a test that renders a server component <User> with a 'user' prop and asserts the output contains the user's name.

NextJS

import User from '[1]';

const user = { name: 'Alice' };
const output = renderToString(<User [2]=[3] />);
expect(output).toContain('Alice');

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

A'./User'

B'user'

Cuser

D'./components/User'

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from wrong path.

Passing the prop value as a string instead of a variable.

The component is imported from './components/User'. The prop name is user and the value is the variable user.