Wiremock standalone JSON response.ok equals false never reached

Question

I am trying to test different fetch failure scenarios for a JS app using Wiremock standalone with JSON mappings.

try {
  const response = await fetch('/api', options); // 1

  if (response.ok) {
    // do something with a successful response
  } else {
    throw new Error('response not ok'); // 2
  }
} catch (error) {
  // log the error // 3
}

When I simulate bad response failures as per the Wiremock docs it fails at the fetch call (1) and triggers the catch (3).

{
  "request": {
    "urlPath": "/api",
    "method": "ANY"
  },
  "response": {
    "fault": "RANDOM_DATA_THEN_CLOSE"
    "headers": {
      "Content-Type": "application/json; charset=utf-8",
      "Access-Control-Allow-Origin": "http://localhost:8080",
      "Access-Control-Allow-Methods": "PUT",
      "Access-Control-Allow-Headers": "x-csrf-token, content-type, pragma, cache-control",
      "Access-Control-Allow-Credentials": "true",
      "X-Content-Type-Options": "nosniff",
      "x-frame-options": "DENY",
      "x-xss-protection": "1; mode=block"
    }
  }
}

According to MDN docs response.ok is a read only boolean 2XX, but if I set the status to 408 response.ok is still true.

{
  "request": {
    "urlPath": "/api",
    "method": "ANY"
  },
  "response": {
    "status": 408,
    "jsonBody": {},
    "headers": {
      "Content-Type": "application/json; charset=utf-8",
      ...
    }
  }
}

I haven't yet found a combination of status codes/faults with wiremock to actually trigger the !response.ok error (2). We are getting logs from our UI to our production server which is telling us the !response.ok branch is being hit.

Answer 1

From fetch MDN:

A fetch() promise only rejects when a network error is encountered (which is usually when there’s a permissions issue or similar). A fetch() promise does not reject on HTTP errors (404, etc.). Instead, a then() handler must check the Response.ok and/or Response.status properties.

So, the simplest test you can do to reach response.ok === false is to invoke it against unknown URL to force server to return 404.

For example, let's test this functionality using SO and this question. You can fetch it like below:

async function fetchMe() {
  let resp = await fetch("https://stackoverflow.com/questions/64319800");
  if (resp.ok) {
      console.log("Question exists!");
  } else {
      console.log("Question does not exist!");
  }
};
fetchMe();

When we add some text at the end of the URL, SO should return 404:

async function fetchUnknown() {
  let resp = await fetch("https://stackoverflow.com/questions/64319800UNKNOWN");
  if (resp.ok) {
      console.log("Question exists!");
  } else {
      console.log("Question does not exist!");
  }
};
fetchUnknown();