Mock data not returned by msw

[kboul]

Hello,

I have a react 17.x, redux application where I have used many times msw to mock data successfully. However there is one component that although I have provided handlers, when writing unit tests and I expect a request to have been mocked, the data never return. Is there a way to debug the returned mock response? Any help is greatly appreciated. I use fetch to fetch the data in the actual app. Also when I log into the console the process seems to stop when I await the response. I logged server.printHandlers to ensure that the URL is the correct and indeed it is the correct.

rest.get(${host}/earthview/ml_json/, (_, res, ctx) => res(ctx.json(modelDetailsMockedRes))),
and I return

export const modelDetailsMockedRes = {
  wlbs: [
    {
      idwlb: 8,
      wlbwellborename: '1/2-1',
      qc_logs: [5, 6, 43, 12, 45, 14, 46, 29, 30, 31]
    },
    {
      idwlb: 14,
      wlbwellborename: '1/2-2',
      qc_logs: [43, 5, 6]
    },
    {
      idwlb: 15,
      wlbwellborename: '1/3-10',
      qc_logs: [29, 19, 20, 5, 6, 43, 13]
    }
  ],
...
]

In my component I have a list that its content is the above data but if I debug the testing console I get just the name of the list and its icon, not any data content populated.

If I pass mock data also on redux store because the same data should populate redux store, the content will appear as expected with data populated but I intend to receive the mock data by msw. I have done this many times in the same app but in this use case I get nothing back from the mock response.

[cmacdonnacha]

Are you sure that the server has started in your tests? Example.

You can also running in debug mode to see if requests are being made.

[kboul]

Hello @cmacdonnacha . Thanks for answering. Yes, I have started the server, I am pretty sure about that.
Regarding the debug mode, thanks I did not know this feature, I tried it and I see the following logs:

022-10-17T19:09:20.106Z xhr:request GET /api/earthview/ml_json/?project=New_Zealand reset
2022-10-17T19:09:20.106Z xhr:request GET /api/earthview/ml_json/?project=New_Zealand readyState change 0 -> 1
2022-10-17T19:09:20.106Z xhr:request GET /api/earthview/ml_json/?project=New_Zealand triggering readystate change...
2022-10-17T19:09:20.106Z xhr:request GET /api/earthview/ml_json/?project=New_Zealand trigger "readystatechange" (1)
2022-10-17T19:09:20.105Z async-event-emitter:on adding "response" listener...
2022-10-17T19:09:20.106Z async-event-emitter:openListenerQueue opening "response" listeners queue...
2022-10-17T19:09:20.106Z xhr:request GET /api/earthview/ml_json/?project=New_Zealand resolve listener for event "readystatechange"
2022-10-17T19:09:20.106Z xhr:request GET /api/earthview/ml_json/?project=New_Zealand set request header "Authorization" to "Bearer null"
2022-10-17T19:09:20.106Z xhr:request GET /api/earthview/ml_json/?project=New_Zealand send GET /api/earthview/ml_json/?project=New_Zealand
2022-10-17T19:09:20.106Z async-event-emitter:openListenerQueue returning an exising queue: []
2022-10-17T19:09:20.106Z async-event-emitter:on awaiting the "response" listener...
2022-10-17T19:09:20.106Z async-event-emitter:openListenerQueue opening "response" listeners queue...
2022-10-17T19:09:20.106Z async-event-emitter:openListenerQueue returning an exising queue: [
  {
    args: [ [IsomorphicRequest], [Object] ],
    done: Promise { <pending> }
  }
]
2022-10-17T19:09:20.106Z async-event-emitter:on awaiting the "response" listener...
2022-10-17T19:09:20.106Z xhr:request GET /api/earthview/ml_json/ received mocked response {
  status: 200,
  statusText: 'OK',
  headers: { 'x-powered-by': 'msw', 'content-type': 'application/json' },
  body: '{"logs_with_logints":[{"idlog":4,"log":"LITH_ESA","logtype":"LITH"}],"wlbs":[{"idwlb":8,"wlbwellborename":"1/2-1","qc_logs":[5,6,43,12,45,14,46,29,30,31]},{"idwlb":14,"wlbwellborename":"1/2-2","qc_logs":[43,5,6]},{"idwlb":15,"wlbwellborename":"1/3-10","qc_logs":[29,19,20,5,6,43,13]}],"formations":[{"idformation":52,"formationname":"NORDLAND GP UND","idgroup":9},{"idformation":31,"formationname":"HORDALAND GP UND","idgroup":19},{"idformation":3,"formationname":"BALDER FM","idgroup":22}],"clusters":[{"idcluster":3,"clustername":"Local","workername":"compute_job_test_user","username":"test_user"}]}',
  delay: 0
}

So what I get from that is that the response is being resolved, however I don't receive its content on the testing console.
I am not sure what might cause this issue.

[cmacdonnacha]

Ok so it sounds like your getting the mock data back, so MSW seems to be working ok. In this case it's probably an issue with your test. Can you share the test? A CodeSandbox would be ideal, here's one to can fork: https://codesandbox.io/embed/msw-react-xx1c8?codemirror=1

[kboul]

I guess you are right. It is a bit difficult to share the component and the test code due to length and privacy. I wish I could do to get more help.
Unfortunately, I will have to figure it out on my own. Thank you very much for your help.

[cmacdonnacha]

I would suggest posting in Stack Overflow under the "react-testing-library` tag. You'll definitely have to post some code/codesanbox if you want some help though, even if you just swap out the real data with fake data.