Bird
0
0

Given this test code snippet, what will be the output when the mocked API returns { message: 'Hello' }?

medium📝 component behavior Q13 of 15
Remix - Testing
Given this test code snippet, what will be the output when the mocked API returns { message: 'Hello' }?
import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/greet', (req, res, ctx) => {
    return res(ctx.json({ message: 'Hello' }));
  })
);

beforeAll(() => server.listen());
afterAll(() => server.close());

// Test function
async function fetchGreeting() {
  const response = await fetch('/api/greet');
  const data = await response.json();
  return data.message;
}

fetchGreeting().then(console.log);
A'Hello'
B'Hi there!'
Cundefined
DError: Network request failed
Step-by-Step Solution
Solution:
  1. Step 1: Analyze the mock handler

    The mock intercepts GET '/api/greet' and returns JSON { message: 'Hello' }.
  2. Step 2: Trace fetchGreeting function

    fetchGreeting fetches '/api/greet', parses JSON, and returns data.message which is 'Hello'.
  3. Final Answer:

    'Hello' -> Option A
  4. Quick Check:

    Mock returns 'Hello' so output = 'Hello' [OK]
Quick Trick: Mock returns JSON with message 'Hello' so output matches [OK]
Common Mistakes:
MISTAKES
  • Expecting different message than mocked
  • Forgetting to parse JSON before accessing message
  • Assuming network error without server.listen()

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Remix Quizzes