How to get data from response in Pact - reactjs

Question

I'm using Pact for the api test in React project. But I can't get the data that I expect from the response.
I think there is no mistake in the Pact configuration.
Here is my test code with Pact.
const { Pact } = require('#pact-foundation/pact');
const { getAllServices } = require('./index.ts');
describe('The API', () => {
const res = [{
id: '1',
name: 'service1'
},{
id: '2',
name: 'service2'
},{
id: '3',
name: 'service3'
}]
describe("Services API testing", () => {
beforeEach(() => {
const interaction = {
uponReceiving: "",
withRequest: {
method: 'GET',
path: '',
query: '',
headers: {
Accept: 'application/json'
}
},
willRespondWith: {
status: 200,
headers: {
'Content-Type': 'application/json'
},
body: res
}
};
return provider.addInteraction(interaction);
});
it('returns all services', (done) => {
return getAllServices()
.then(response => {
expect(response.data).toEqual(res);
done()
})
.then(() => provider.verify());
});
});
});
This is data format I got.
Body {
url: 'http://192.168.0.73:8080/services',
status: 200,
statusText: 'OK',
headers:
Headers {
_headers:
{ 'content-type': [Array],
'transfer-encoding': [Array],
date: [Array],
connection: [Array] } },
ok: true,
body:
PassThrough {
_readableState:
ReadableState {
objectMode: false,
highWaterMark: 16384,
buffer: [Object],
length: 2743,
pipes: null,
pipesCount: 0,
flowing: null,
ended: false,
endEmitted: false,
reading: true,
sync: false,
needReadable: true,
emittedReadable: true,
readableListening: false,
resumeScheduled: false,
destroyed: false,
defaultEncoding: 'utf8',
awaitDrain: 0,
readingMore: false,
decoder: null,
encoding: null },
readable: true,
domain: null,
_events:
{ end: [Object],
prefinish: [Function: prefinish],
unpipe: [Function: onunpipe],
drain: [Function],
error: [Function: onerror],
close: [Object],
finish: [Object] },
_eventsCount: 7,
_maxListeners: undefined,
_writableState:
WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: false,
ending: false,
ended: false,
finished: false,
destroyed: false,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
bufferedRequest: null,
lastBufferedRequest: null,
pendingcb: 0,
prefinished: false,
errorEmitted: false,
bufferedRequestCount: 0,
corkedRequestsFree: [Object] },
writable: true,
allowHalfOpen: true,
_transformState:
{ afterTransform: [Function: bound afterTransform],
needTransform: true,
transforming: false,
writecb: null,
writechunk: null,
writeencoding: 'buffer' } },
bodyUsed: false,
size: 0,
timeout: 0,
_raw: [],
_abort: false }
Please share your fix or tips if you faced such this thing before or you have any good point.
I will appreciate your any posts.
Thanks in advance.

Answer 1

This looks like it's not a problem related to pact - the data format looks like you're using fetch, but aren't using the API correctly.
try swapping:
return getAllServices()
.then(response => {
expect(response.data).toEqual(res);
done()
})
for:
return getAllServices()
.then(response => {
expect(response.json()).toEqual(res);
done()
})
As a style point, Pact is supposed to test your entire API layer. To stick to this style, I would actually move the response.json() call inside getAllServices().