[Error: Nock] Mocking "Random User Generator API" HTTP Requests

[developermau]

HI,

I have built a React App to consume the Random User Generator API, and create a unit testing with React Testing Library, and Jest. Another hand, I used nock for mocking the API Requests. However, I had an error:

 Error: Error: Nock: No match for request {
      "method": "GET",
      "url": "https://randomuser.me/api/?results=2",
      "headers": {
        "accept": "application/json, text/plain, */*",
        "referer": "http://localhost/",
        "user-agent": "Mozilla/5.0 (linux) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/20.0.3",
        "accept-language": "en",
        "origin": "http://localhost",
        "accept-encoding": "gzip, deflate"
      }
    }
        at Object.dispatchError (/home/projects/vitejs-vite-egjcsd/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:63:19)
        at Request.eval (/home/projects/vitejs-vite-egjcsd/node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:655:18)
        at Request.EventEmitter.emit (https://vitejsviteegjcsd-4yvu.w-corp.staticblitz.com/blitz.131c0a4f.js:35:144041)
        at OverriddenClientRequest.eval (/home/projects/vitejs-vite-egjcsd/node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:121:14)

Then I copy the headers to my test like this:

    const headers = {
      accept: 'application/json, text/plain, */*',
      referer: 'http://localhost/',
      'user-agent':
        'Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/20.0.3',
      'accept-language': 'en',
      origin: 'http://localhost',
      'accept-encoding': 'gzip, deflate',
    };

    // Mocking the API response `?count=${count}`
    nock('https://randomuser.me')
      .get('/api')
      .query({ count })
      .reply(200, { results }, headers);

But it did not work. Then, I have tried defaultReplyHeaders:

const headers = {
      accept: 'application/json, text/plain, */*',
      referer: 'http://localhost/',
      'user-agent':
        'Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/20.0.3',
      'accept-language': 'en',
      origin: 'http://localhost',
      'accept-encoding': 'gzip, deflate',
    };

    // Mocking the API response `?count=${count}`
    nock('https://randomuser.me')
       .defaultReplyHeaders({
         'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type',
      })
      .get('/api')
      .query({ count })
      .reply(200, { results }, headers);
  });

It still not working.

I created a Stackblitz if you want to fork and run the tests.
Please, I will appreciate your help or advice to solve this issue.

[developermau]

[Update]

I added a command on package.json. It is npm run test:debug. I found this log:

nock.scope:randomuser.me attempting match 

{
  "protocol": "https:",
  "hostname": "randomuser.me",
  "hash": "",
  "search": "?results=2",
  "pathname": "/api/",
  "path": "/api/?results=2",
  "href": "https://randomuser.me/api/?results=2",
  "method": "GET",
  "headers": {
    "accept": "application/json, text/plain, */*",
    "referer": "http://localhost/",
    "user-agent": "Mozilla/5.0 (linux) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/20.0.3",
    "accept-language": "en",
    "origin": "http://localhost",
    "accept-encoding": "gzip, deflate"
  },
  "agent": {
    "_events": {},
    "_eventsCount": 2,
    "defaultPort": 443,
    "protocol": "https:",
    "options": { "keepAlive": true, "rejectUnauthorized": true, "path": null },
    "requests": {},
    "sockets": {},
    "freeSockets": {},
    "keepAliveMsecs": 1000,
    "keepAlive": true,
    "maxSockets": null,
    "maxFreeSockets": 256,
    "scheduling": "lifo",
    "maxTotalSockets": null,
    "totalSocketCount": 0,
    "maxCachedSessions": 100,
    "_sessionCache": { "map": {}, "list": [] }
  },
  "proto": "https",
  "port": 443,
  "host": "randomuser.me:443"
}

However, the headers is the same. Also, i found this line:

  nock.scope:randomuser.me query matching failed +1ms

I am passing the query in this way:

query({ count })

or code block complete:

const count = 2;
// ... more code
    const headers = {
      accept: 'application/json, text/plain, */*',
      referer: 'http://localhost/',
      'user-agent':
        'Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/20.0.3',
      'accept-language': 'en',
      origin: 'http://localhost',
      'accept-encoding': 'gzip, deflate',
    };

    // Mocking the API response: https://randomuser.me/api?count=2
    nock('https://randomuser.me')
      .defaultReplyHeaders({
        'Access-Control-Allow-Origin': '*',
         'Access-Control-Allow-Headers': 'Content-Type',
       })
      .get('/api')
      .query({ count })
      .reply(200, { results }, headers);

I can't understand it didn't work or this error.

[mastermatt]

nock.scope:randomuser.me query matching failed +1ms denotes that the query string of the request did not match what the Nock interceptor was looking for.
You're configuring Nock with ... .query({ count }), however, the request being made has the the query string results=2. It seems you just need to fix your test setup to filter on "results" instead of "count".

[developermau]

Yes, you're right!

    // Mocking the API response: https://randomuser.me/api?results=2
    nock('https://randomuser.me')
      .defaultReplyHeaders({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': 'Content-Type',
      })
      .get('/api')
      .query({ results: count })
      .reply(200, { results });

Also, I figured out that my hook had an error with the url

// Befor
 const url = `https://randomuser.me/api/?results=${count}`;

// After
 const url = `https://randomuser.me/api?results=${count}`;

Thank you so much @mastermatt!