Jest or Vitest setup for Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Jest test for an Express route?

Consider this Express app and Jest test. What will the test output?

Express

const express = require('express');
const request = require('supertest');

const app = express();
app.get('/hello', (req, res) => {
  res.status(200).send('Hello World');
});

test('GET /hello returns Hello World', async () => {
  const response = await request(app).get('/hello');
  return response.text;
});

A TypeError

B "hello world"

C "Hello World"

D undefined

💡 Hint

Check the exact string sent by the Express route.

The Express route sends 'Hello World' with capital H and W. The test returns response.text which matches exactly.

📝 Syntax

intermediate

Which Vitest setup code correctly mocks an Express middleware?

Choose the correct Vitest code snippet to mock an Express middleware function.

A

import { vi } from 'vitest';
const mockMiddleware = vi.fn((req, res, next) => next());

B const mockMiddleware = jest.fn((req, res, next) => next());

C

import { mock } from 'vitest';
const mockMiddleware = mock((req, res, next) => next());

D

import { spy } from 'vitest';
const mockMiddleware = spy((req, res, next) => next());

💡 Hint

Vitest uses vi.fn to create mocks.

Vitest's mocking function is vi.fn. Options B and D use non-existent imports. Option A uses Jest syntax, not Vitest.

🔧 Debug

advanced

Why does this Jest test for an Express async route fail with timeout?

Look at this Jest test for an async Express route. Why does it fail with a timeout?

Express

const express = require('express');
const request = require('supertest');

const app = express();
app.get('/data', async (req, res) => {
  await new Promise(resolve => setTimeout(resolve, 100));
  res.json({ success: true });
});

test('GET /data returns success true', () => {
  return request(app).get('/data').expect(200).expect('Content-Type', /json/).expect({ success: true });
});

A The test lacks async/await or returning the promise, so Jest finishes before response.

B The Express route does not call next(), causing the request to hang.

C The test expects wrong status code 200 instead of 201.

D The test uses .expect with an object which is invalid syntax.

💡 Hint

Check how Jest knows when async tests finish.

The test function is not marked async and does not return the promise from supertest, so Jest ends the test early causing timeout.

❓ state_output

advanced

What is the value of 'count' after this Vitest test runs?

Given this Express app and Vitest test, what is the final value of the variable count?

Express

import express from 'express';
import request from 'supertest';
import { describe, it, expect } from 'vitest';

let count = 0;
const app = express();
app.get('/increment', (req, res) => {
  count += 1;
  res.send('ok');
});

describe('Increment route', () => {
  it('increments count twice', async () => {
    await request(app).get('/increment');
    await request(app).get('/increment');
  });
});

A undefined

B 0

C 1

D 2

💡 Hint

Each GET request to /increment adds 1 to count.

The test calls the route twice, each time increasing count by 1, so final count is 2.

🧠 Conceptual

expert

Which option correctly explains why Vitest can run Express tests faster than Jest?

Vitest is often faster than Jest for testing Express apps. Why?

A Vitest compiles Express code to native binaries before testing.

B Vitest runs tests in the same process without spawning workers, reducing overhead.

C Vitest uses a slower but more accurate virtual DOM for Express testing.

D Vitest disables all asynchronous code to speed up tests.

💡 Hint

Think about how test runners handle processes and workers.

Vitest runs tests in the same process by default, avoiding worker startup time, making it faster especially for small test suites.

Practice

1. What is the main reason to separate the Express app export from the server start when setting up Jest or Vitest tests?

easy

A. It allows tests to import the app without starting the server.

B. It improves the app's performance in production.

C. It enables automatic server restarts during development.

D. It prevents the app from logging errors during tests.

Solution

1. Step 1: Understand app export and server start roles

   The Express app handles routes and middleware, while server start listens on a port.

2. Step 2: Why separate for testing?

   Separating lets tests import the app to simulate requests without starting a real server, avoiding conflicts and port issues.

3. Final Answer:

   It allows tests to import the app without starting the server. -> Option A

4. Quick Check:

   Separate app export = test-friendly import [OK]

Hint: Separate app and server start to test without running server [OK]

Common Mistakes:

• Thinking separation improves production speed
• Confusing server restart with test setup
• Assuming separation stops error logs

2. Which of the following is the correct way to import and use Supertest with Jest for testing an Express app exported as app?

easy

A. import request from 'supertest'; const req = request(app);

B. const request = require('supertest')(app);

C. const req = supertest(app);

D. import { supertest } from 'supertest'; const req = supertest(app);

Solution

1. Step 1: Check import syntax for Supertest in ES modules

   Supertest is imported as default export, so use import request from 'supertest';.

2. Step 2: Create request instance with app

   Call request(app) to create a test client for the Express app.

3. Final Answer:

   import request from 'supertest'; const req = request(app); -> Option A

4. Quick Check:

   Supertest import + request(app) = correct [OK]

Hint: Use default import then call request(app) for Supertest [OK]

Common Mistakes:

• Using require with ES module import style
• Calling supertest without import
• Incorrect named import from 'supertest'

3. Given this Jest test code for an Express app, what will be the test result?

import request from 'supertest';
import app from './app';

test('GET /hello returns 200 and message', async () => {
  const response = await request(app).get('/hello');
  expect(response.status).toBe(200);
  expect(response.body.message).toBe('Hello World');
});

Assuming the Express app has a route /hello that sends { message: 'Hello World' }, what happens?

medium

A. Test throws an error because app is not imported correctly.

B. Test fails because response.body is undefined.

C. Test fails with 404 status because route is missing.

D. Test passes because status is 200 and message matches.

Solution

1. Step 1: Confirm route and response

   The app has /hello route returning JSON with { message: 'Hello World' } and status 200.

2. Step 2: Analyze test expectations

   The test checks status 200 and message string, which matches the route response.

3. Final Answer:

   Test passes because status is 200 and message matches. -> Option D

4. Quick Check:

   Matching route and response = test pass [OK]

Hint: Match route response and test expectations for pass [OK]

Common Mistakes:

• Assuming response.body is undefined without JSON middleware
• Expecting 404 if route exists
• Thinking import errors happen without evidence

4. You wrote this Vitest test for your Express app:

import request from 'supertest';
import app from './app';

test('POST /data returns 201', async () => {
  const res = await request(app).post('/data').send({ name: 'Test' });
  expect(res.status).toBe(201);
});

But the test fails with TypeError: request(app).post is not a function. What is the likely cause?

medium

A. The Express app does not have a POST /data route.

B. You imported Supertest incorrectly or did not install it.

C. You forgot to export the app from your Express file.

D. Vitest does not support async tests.

Solution

1. Step 1: Understand the error meaning

   post is not a function means request(app) is not returning a Supertest object.

2. Step 2: Check import and installation

   This usually happens if Supertest is not imported correctly or missing from dependencies.

3. Final Answer:

   You imported Supertest incorrectly or did not install it. -> Option B

4. Quick Check:

   post() missing = import or install issue [OK]

Hint: Check Supertest import and install if post() missing [OK]

Common Mistakes:

• Blaming missing route for method error
• Assuming app export causes this error
• Thinking Vitest can't handle async

5. You want to write a Vitest test that runs multiple requests to your Express app without starting the server each time. Which setup is best practice to achieve this?

hard

A. Run the server manually before tests and use fetch to call endpoints.

B. Start the server in a beforeAll hook and close it in afterAll for each test file.

C. Export the Express app from app.js and import it in tests; use Supertest to call routes directly.

D. Use a global variable to store the server instance and restart it before each test.

Solution

1. Step 1: Understand server start impact on tests

   Starting the server for each test slows tests and can cause port conflicts.

2. Step 2: Use app export with Supertest

   Exporting the app lets Supertest simulate requests without real server, making tests faster and isolated.

3. Final Answer:

   Export the Express app from app.js and import it in tests; use Supertest to call routes directly. -> Option C

4. Quick Check:

   App export + Supertest = efficient test setup [OK]

Hint: Export app and test with Supertest, avoid real server start [OK]

Common Mistakes:

• Starting server for every test causing slow tests
• Using fetch instead of Supertest in tests
• Restarting server unnecessarily before each test