Why testing APIs matters in Express - Performance Evidence

Performance: Why testing APIs matters

HIGH IMPACT

Testing APIs ensures backend reliability and responsiveness, which directly impacts user experience and frontend rendering speed.

Ensuring API endpoints respond quickly and correctly

Express

app.get('/data', async (req, res) => {
  try {
    const results = await database.query('SELECT * FROM data');
    res.json(results);
  } catch (error) {
    res.status(500).json({ error: 'Server error' });
  }
});

// Tests verify response time and error handling

Proper error handling and tests ensure fast, reliable API responses that keep UI responsive.

📈 Performance GainReduces slow or failed responses, improving INP and user experience.

Ensuring API endpoints respond quickly and correctly

Express

app.get('/data', (req, res) => {
  // no tests, unhandled errors
  database.query('SELECT * FROM data', (err, results) => {
    if (err) throw err;
    res.json(results);
  });
});

No error handling or tests means slow or broken responses can block frontend rendering and user input.

📉 Performance CostCauses slow API responses and potential crashes, increasing INP and blocking UI updates.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No API testing, unhandled errors	N/A	N/A	Blocks rendering due to slow/failing data	[X] Bad
API with error handling and tests	N/A	N/A	Fast, reliable data enables smooth rendering	[OK] Good

Rendering Pipeline

API testing affects the backend response time stage, which influences when the browser can receive data to render or update UI.

→Network Request

→JavaScript Execution

→Paint

⚠️ BottleneckNetwork Request latency due to slow or failing API responses

Core Web Vital Affected

INP

Testing APIs ensures backend reliability and responsiveness, which directly impacts user experience and frontend rendering speed.

Optimization Tips

1Test APIs to catch errors before they slow down the frontend.

2Fast and reliable API responses improve user interaction speed (INP).

3Proper error handling in APIs prevents UI blocking and crashes.

Performance Quiz - 3 Questions

How does testing APIs improve frontend performance?

A By ensuring APIs respond quickly and correctly, reducing UI blocking

B By increasing the size of API responses

C By adding more DOM nodes to the page

D By delaying network requests intentionally

DevTools: Network

How to check: Open DevTools > Network tab, reload page, and observe API request timing and status codes.

What to look for: Look for fast response times (low latency) and successful status codes (200s) indicating healthy API performance.

Practice

1. Why is testing APIs important in Express applications?

easy

A. It automatically updates the API documentation.

B. It makes the app run faster on the server.

C. It helps find and fix problems early before users see them.

D. It reduces the size of the API code.

Solution

1. Step 1: Understand the purpose of API testing

   Testing APIs helps catch bugs and errors early in development.

2. Step 2: Identify the benefit of early problem detection

   Finding problems early prevents issues from reaching users and causing failures.

3. Final Answer:

   It helps find and fix problems early before users see them. -> Option C

4. Quick Check:

   API testing = early bug detection [OK]

Hint: Testing finds bugs early to avoid user issues [OK]

Common Mistakes:

• Thinking testing speeds up server runtime
• Confusing testing with documentation generation
• Believing testing reduces code size

2. Which of the following is the correct way to write a simple test for an Express API endpoint using a testing library like Jest and Supertest?

easy

A. app.get('/api').expect(200);

B. request(app).get('/api').expect(200).end(done);

C. request('/api').get(app).expect(200);

D. expect(request(app).get('/api')).toBe(200);

Solution

1. Step 1: Recognize the correct testing syntax

   Using Supertest, you call request(app).get('/api') to test the endpoint.

2. Step 2: Confirm chaining with expect and end

   The correct pattern chains .expect(200) and .end(done) to complete the test.

3. Final Answer:

   request(app).get('/api').expect(200).end(done); -> Option B

4. Quick Check:

   Supertest syntax = request(app).get().expect() [OK]

Hint: Supertest uses request(app).get(url).expect(status) [OK]

Common Mistakes:

• Calling expect directly on app.get instead of request
• Swapping app and URL in request call
• Using expect incorrectly without chaining

3. Consider this Express API test snippet using Jest and Supertest:

test('GET /users returns 200 and JSON', async () => {
  const response = await request(app).get('/users');
  expect(response.status).toBe(200);
  expect(response.headers['content-type']).toMatch(/json/);
});

What will happen if the API returns status 404 instead of 200?

medium

A. The test will fail because the status is not 200.

B. The test will pass because content-type is checked.

C. The test will throw a syntax error.

D. The test will ignore the status and pass.

Solution

1. Step 1: Analyze the status check in the test

   The test expects response.status to be exactly 200.

2. Step 2: Understand test behavior on mismatch

   If the API returns 404, the expect(response.status).toBe(200) assertion fails and the test fails.

3. Final Answer:

   The test will fail because the status is not 200. -> Option A

4. Quick Check:

   Status check fails test if not 200 [OK]

Hint: Expect status 200; else test fails [OK]

Common Mistakes:

• Assuming test passes if content-type matches
• Thinking 404 triggers syntax error
• Believing test ignores status mismatch

4. You wrote this Express API test but it always times out:

test('POST /login returns 200', (done) => {
  request(app)
    .post('/login')
    .send({ username: 'user', password: 'pass' })
    .expect(200);
});

What is the main reason for the timeout?

medium

A. Missing call to done() to signal test completion.

B. Incorrect HTTP method used for /login endpoint.

C. The .send() method is not supported in Supertest.

D. The test expects 200 but server returns 500.

Solution

1. Step 1: Check test callback usage

   The test uses done callback but never calls done(), so Jest waits forever.

2. Step 2: Understand how to end async tests

   Calling done() inside .end() or returning a promise is needed to finish the test.

3. Final Answer:

   Missing call to done() to signal test completion. -> Option A

4. Quick Check:

   Call done() to end async test [OK]

Hint: Always call done() or return promise in async tests [OK]

Common Mistakes:

• Forgetting to call done() in callback tests
• Assuming .send() is unsupported
• Guessing wrong HTTP method without checking

5. You want to ensure your Express API handles errors correctly. Which testing approach best helps catch unexpected server errors early?

hard

A. Skip testing and rely on console logs for errors.

B. Manually test the API endpoints once after deployment.

C. Only test the API when users report bugs.

D. Write automated tests that simulate invalid inputs and check for 4xx or 5xx responses.

Solution

1. Step 1: Identify best practice for error handling tests

   Automated tests simulating invalid inputs help verify API returns proper error codes.

2. Step 2: Understand benefits of early automated error detection

   This approach finds bugs before deployment and prevents user impact.

3. Final Answer:

   Write automated tests that simulate invalid inputs and check for 4xx or 5xx responses. -> Option D

4. Quick Check:

   Automated error tests catch bugs early [OK]

Hint: Test invalid inputs automatically to catch errors early [OK]

Common Mistakes:

• Relying only on manual or post-deployment testing
• Ignoring error cases in tests
• Depending on logs instead of tests