javascript - res.json() is undefined when mocking post request with fetch-mock and isomrphic-fetch - Stack Overflow

admin管理员组

文章数量:1023044

I'm using fetch-mock to test my client action creators in cases where there is an async call being made to the BE. While all get requests are working well I'm having hard time doing the same to post and put requests.

Attached here a code example that if works I believe that my actual code will work as well.

I'm using import fetchMock from 'fetch-mock' for mocking the response and require('isomorphic-fetch') directly to replace the default fetch

I added some ments but I do get a response with status 200 (if I change the mocked response status to 400 I get it as well. The problem is that res.json() resulted with undefined instead of the mocked result body. Using JSON.stringify is something that I used after not being able to make it work without it.

const responseBody = {response: 'data from the server'};

fetchMock.once('', {
  status: 200,
  body: JSON.stringify(responseBody),
  statusText: 'OK',
  headers: {'Content-Type': 'application/json'},
  sendAsJson: false
}, {method: 'POST'});

fetch('',
{
  method: 'post',
  body: JSON.stringify({data: 'Sent payload'}),
  headers : {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})
.then(function (res) {
  expect(res.status).toEqual(200); // Pass
  res.json();
})
.then(function (json) {
  console.log(json); // print undefine
  expect(json).toEqual(responseBody); // Fail expected value to equal: {"response": "data from the server"} Received: undefined

  done();
})

• Mocking GET requests is working just fine
• I also tried using it with fetchMock.post but had no luck
• Would also appreciate if someone knows how I can test the post request sent payload as well (can't see any reference for that in the documentation)

I'm using fetch-mock to test my client action creators in cases where there is an async call being made to the BE. While all get requests are working well I'm having hard time doing the same to post and put requests.

Attached here a code example that if works I believe that my actual code will work as well.

I'm using import fetchMock from 'fetch-mock' for mocking the response and require('isomorphic-fetch') directly to replace the default fetch

I added some ments but I do get a response with status 200 (if I change the mocked response status to 400 I get it as well. The problem is that res.json() resulted with undefined instead of the mocked result body. Using JSON.stringify is something that I used after not being able to make it work without it.

const responseBody = {response: 'data from the server'};

fetchMock.once('http://test.url', {
  status: 200,
  body: JSON.stringify(responseBody),
  statusText: 'OK',
  headers: {'Content-Type': 'application/json'},
  sendAsJson: false
}, {method: 'POST'});

fetch('http://test.url',
{
  method: 'post',
  body: JSON.stringify({data: 'Sent payload'}),
  headers : {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})
.then(function (res) {
  expect(res.status).toEqual(200); // Pass
  res.json();
})
.then(function (json) {
  console.log(json); // print undefine
  expect(json).toEqual(responseBody); // Fail expected value to equal: {"response": "data from the server"} Received: undefined

  done();
})

• Mocking GET requests is working just fine
• I also tried using it with fetchMock.post but had no luck
• Would also appreciate if someone knows how I can test the post request sent payload as well (can't see any reference for that in the documentation)

• javascript
• unit-testing
• post
• mocking
• jestjs

Share Improve this question Follow asked Nov 6, 2017 at 13:30 shmilkyshmilky 311 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

In your first then, you don't have an explicit return, with the keyword return

If you don't do a return, the next then doesn't know the value. That's why your json is undefined.

For example:

var myInit = { method: 'GET', mode: 'cors', cache: 'default' };

fetch('https://randomuser.me/api/',myInit)
  .then(function(res) {
     return res.json()
  })
  .then(function(r) {
     console.log(r)
  })

So, for you:

const responseBody = {response: 'data from the server'};

fetchMock.once('http://test.url', {
  status: 200,
  body: JSON.stringify(responseBody),
  statusText: 'OK',
  headers: {'Content-Type': 'application/json'},
  sendAsJson: false
}, {method: 'POST'});

fetch('http://test.url',
{
  method: 'post',
  body: JSON.stringify({data: 'Sent payload'}),
  headers : {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})
.then(function (res) {
  expect(res.status).toEqual(200); // Pass
  return res.json(); // return here
})
.then(function (json) {
  console.log(json); // print undefine
  expect(json).toEqual(responseBody); // Fail expected value to equal: {"response": "data from the server"} Received: undefined

  done();
})

I'm using fetch-mock to test my client action creators in cases where there is an async call being made to the BE. While all get requests are working well I'm having hard time doing the same to post and put requests.

Attached here a code example that if works I believe that my actual code will work as well.

I'm using import fetchMock from 'fetch-mock' for mocking the response and require('isomorphic-fetch') directly to replace the default fetch

I added some ments but I do get a response with status 200 (if I change the mocked response status to 400 I get it as well. The problem is that res.json() resulted with undefined instead of the mocked result body. Using JSON.stringify is something that I used after not being able to make it work without it.

const responseBody = {response: 'data from the server'};

fetchMock.once('', {
  status: 200,
  body: JSON.stringify(responseBody),
  statusText: 'OK',
  headers: {'Content-Type': 'application/json'},
  sendAsJson: false
}, {method: 'POST'});

fetch('',
{
  method: 'post',
  body: JSON.stringify({data: 'Sent payload'}),
  headers : {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})
.then(function (res) {
  expect(res.status).toEqual(200); // Pass
  res.json();
})
.then(function (json) {
  console.log(json); // print undefine
  expect(json).toEqual(responseBody); // Fail expected value to equal: {"response": "data from the server"} Received: undefined

  done();
})

• Mocking GET requests is working just fine
• I also tried using it with fetchMock.post but had no luck
• Would also appreciate if someone knows how I can test the post request sent payload as well (can't see any reference for that in the documentation)

I'm using fetch-mock to test my client action creators in cases where there is an async call being made to the BE. While all get requests are working well I'm having hard time doing the same to post and put requests.

Attached here a code example that if works I believe that my actual code will work as well.

I'm using import fetchMock from 'fetch-mock' for mocking the response and require('isomorphic-fetch') directly to replace the default fetch

I added some ments but I do get a response with status 200 (if I change the mocked response status to 400 I get it as well. The problem is that res.json() resulted with undefined instead of the mocked result body. Using JSON.stringify is something that I used after not being able to make it work without it.

const responseBody = {response: 'data from the server'};

fetchMock.once('http://test.url', {
  status: 200,
  body: JSON.stringify(responseBody),
  statusText: 'OK',
  headers: {'Content-Type': 'application/json'},
  sendAsJson: false
}, {method: 'POST'});

fetch('http://test.url',
{
  method: 'post',
  body: JSON.stringify({data: 'Sent payload'}),
  headers : {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})
.then(function (res) {
  expect(res.status).toEqual(200); // Pass
  res.json();
})
.then(function (json) {
  console.log(json); // print undefine
  expect(json).toEqual(responseBody); // Fail expected value to equal: {"response": "data from the server"} Received: undefined

  done();
})

• Mocking GET requests is working just fine
• I also tried using it with fetchMock.post but had no luck
• Would also appreciate if someone knows how I can test the post request sent payload as well (can't see any reference for that in the documentation)

• javascript
• unit-testing
• post
• mocking
• jestjs

Share Improve this question Follow asked Nov 6, 2017 at 13:30 shmilkyshmilky 311 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

In your first then, you don't have an explicit return, with the keyword return

If you don't do a return, the next then doesn't know the value. That's why your json is undefined.

For example:

var myInit = { method: 'GET', mode: 'cors', cache: 'default' };

fetch('https://randomuser.me/api/',myInit)
  .then(function(res) {
     return res.json()
  })
  .then(function(r) {
     console.log(r)
  })

So, for you:

const responseBody = {response: 'data from the server'};

fetchMock.once('http://test.url', {
  status: 200,
  body: JSON.stringify(responseBody),
  statusText: 'OK',
  headers: {'Content-Type': 'application/json'},
  sendAsJson: false
}, {method: 'POST'});

fetch('http://test.url',
{
  method: 'post',
  body: JSON.stringify({data: 'Sent payload'}),
  headers : {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
})
.then(function (res) {
  expect(res.status).toEqual(200); // Pass
  return res.json(); // return here
})
.then(function (json) {
  console.log(json); // print undefine
  expect(json).toEqual(responseBody); // Fail expected value to equal: {"response": "data from the server"} Received: undefined

  done();
})

本文标签： javascriptresjson() is undefined when mocking post request with fetchmock and isomrphicfetchStack Overflow