Mixing
How to test an async function which does an axios request to an api using JEST in a React application
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I am trying to test a async/await function which does an api call using axios to get users. I am new to testing React applications and using JEST (trying first time), unable to get the test running.
I have tried using mock function in JEST. My Code is as follows:
// component --users
export default class Users extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.getUsers = this.getUsers.bind(this);
}
/*does an api request to get the users*/
/*async await used to handle the asynchronous behaviour*/
async getUsers() {
// Promise is resolved and value is inside of the resp const.
try {
const resp = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
if (resp.status === 200) {
const users = resp.data;
/* mapped user data to just get id and username*/
const userdata = users.map(user => {
var userObj = {};
userObj["id"] = user.id;
userObj["username"] = user.username;
return userObj;
});
return userdata;
}
} catch (err) {
console.error(err);
}
}
componentDidMount() {
this.getUsers().then(users => this.setState({ users: users }));
}
/*****************************************************************/
//props(userid ,username) are passed so that api call is made for
//getting posts of s psrticular user .
/*****************************************************************/
render() {
if (!this.state.users) {
return (
<div className="usersWrapper">
<img className="loading" src="/loading.gif" alt="Loading.." />
</div>
);
}
return (
<div className="usersWrapper">
{this.state.users.map(user => (
<div key={user.id}>
<Posts username={user.username} userid={user.id} />
</div>
))}
</div>
);
}
}
//axios.js-mockaxios
export default {
get: jest.fn(() => Promise.resolve({ data: {} }))
};
//users.test.js
describe("Users", () => {
describe("componentDidMount", () => {
it("sets the state componentDidMount", async () => {
mockAxios.get.mockImplementationOnce(
() =>
Promise.resolve({
users: [
{
id: 1,
username: "Bret"
}
]
}) //promise
);
const renderedComponent = await shallow(<Users />);
await renderedComponent.update();
expect(renderedComponent.find("users").length).toEqual(1);
});
});
});
the test fails -
FAIL src/components/users.test.js (7.437s) ● Users ›
componentDidMount › sets the state componentDidMount
expect(received).toEqual(expected)
Expected value to equal:
1
Received:
0
Please help me figure out the problem. i am totally new to testing reactapps
reactjs async-await jestjs enzyme
edited Jan 10 at 16:22
skyboyer
4,28811333
asked Jan 2 at 16:40
romaroma
104
|
show 1 more comment
0
I am trying to test a async/await function which does an api call using axios to get users. I am new to testing React applications and using JEST (trying first time), unable to get the test running.
I have tried using mock function in JEST. My Code is as follows:
// component --users
export default class Users extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.getUsers = this.getUsers.bind(this);
}
/*does an api request to get the users*/
/*async await used to handle the asynchronous behaviour*/
async getUsers() {
// Promise is resolved and value is inside of the resp const.
try {
const resp = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
if (resp.status === 200) {
const users = resp.data;
/* mapped user data to just get id and username*/
const userdata = users.map(user => {
var userObj = {};
userObj["id"] = user.id;
userObj["username"] = user.username;
return userObj;
});
return userdata;
}
} catch (err) {
console.error(err);
}
}
componentDidMount() {
this.getUsers().then(users => this.setState({ users: users }));
}
/*****************************************************************/
//props(userid ,username) are passed so that api call is made for
//getting posts of s psrticular user .
/*****************************************************************/
render() {
if (!this.state.users) {
return (
<div className="usersWrapper">
<img className="loading" src="/loading.gif" alt="Loading.." />
</div>
);
}
return (
<div className="usersWrapper">
{this.state.users.map(user => (
<div key={user.id}>
<Posts username={user.username} userid={user.id} />
</div>
))}
</div>
);
}
}
//axios.js-mockaxios
export default {
get: jest.fn(() => Promise.resolve({ data: {} }))
};
//users.test.js
describe("Users", () => {
describe("componentDidMount", () => {
it("sets the state componentDidMount", async () => {
mockAxios.get.mockImplementationOnce(
() =>
Promise.resolve({
users: [
{
id: 1,
username: "Bret"
}
]
}) //promise
);
const renderedComponent = await shallow(<Users />);
await renderedComponent.update();
expect(renderedComponent.find("users").length).toEqual(1);
});
});
});
the test fails -
FAIL src/components/users.test.js (7.437s) ● Users ›
componentDidMount › sets the state componentDidMount
expect(received).toEqual(expected)
Expected value to equal:
1
Received:
0
Please help me figure out the problem. i am totally new to testing reactapps
reactjs async-await jestjs enzyme
edited Jan 10 at 16:22
skyboyer
4,28811333
asked Jan 2 at 16:40
romaroma
104
The code in your question does not show howgetUsersis called, and does not show your test assertion. Is there acomponentDidMountmethod that you left out? Or does your test callgetUsersdirectly? What happens if you remove thetry/catch?
– Jesse Hallett
Jan 2 at 16:59
getUsers() is called in componentDidMount(). It is there in the posted code.
– roma
Jan 2 at 17:12
I'm very sorry; I missed the scrollbar somehow.
– Jesse Hallett
Jan 2 at 17:22
shallowis not an async method, you don't needawaitbefore it. It looks like test is finished earlier then component is re-rendered after got users, can you checksetTimeout( () => expect(renderedComponent.find("users").length).toEqual(1), 0)(in the very end of your test)?
– Alex
Jan 2 at 20:26
The solution you gave seems to work. test passed. Thank you.
– roma
Jan 2 at 21:54
|
show 1 more comment
0
0
0
I am trying to test a async/await function which does an api call using axios to get users. I am new to testing React applications and using JEST (trying first time), unable to get the test running.
I have tried using mock function in JEST. My Code is as follows:
// component --users
export default class Users extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.getUsers = this.getUsers.bind(this);
}
/*does an api request to get the users*/
/*async await used to handle the asynchronous behaviour*/
async getUsers() {
// Promise is resolved and value is inside of the resp const.
try {
const resp = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
if (resp.status === 200) {
const users = resp.data;
/* mapped user data to just get id and username*/
const userdata = users.map(user => {
var userObj = {};
userObj["id"] = user.id;
userObj["username"] = user.username;
return userObj;
});
return userdata;
}
} catch (err) {
console.error(err);
}
}
componentDidMount() {
this.getUsers().then(users => this.setState({ users: users }));
}
/*****************************************************************/
//props(userid ,username) are passed so that api call is made for
//getting posts of s psrticular user .
/*****************************************************************/
render() {
if (!this.state.users) {
return (
<div className="usersWrapper">
<img className="loading" src="/loading.gif" alt="Loading.." />
</div>
);
}
return (
<div className="usersWrapper">
{this.state.users.map(user => (
<div key={user.id}>
<Posts username={user.username} userid={user.id} />
</div>
))}
</div>
);
}
}
//axios.js-mockaxios
export default {
get: jest.fn(() => Promise.resolve({ data: {} }))
};
//users.test.js
describe("Users", () => {
describe("componentDidMount", () => {
it("sets the state componentDidMount", async () => {
mockAxios.get.mockImplementationOnce(
() =>
Promise.resolve({
users: [
{
id: 1,
username: "Bret"
}
]
}) //promise
);
const renderedComponent = await shallow(<Users />);
await renderedComponent.update();
expect(renderedComponent.find("users").length).toEqual(1);
});
});
});
the test fails -
FAIL src/components/users.test.js (7.437s) ● Users ›
componentDidMount › sets the state componentDidMount
expect(received).toEqual(expected)
Expected value to equal:
1
Received:
0
Please help me figure out the problem. i am totally new to testing reactapps
reactjs async-await jestjs enzyme
edited Jan 10 at 16:22
skyboyer
4,28811333
asked Jan 2 at 16:40
romaroma
104
I am trying to test a async/await function which does an api call using axios to get users. I am new to testing React applications and using JEST (trying first time), unable to get the test running.
I have tried using mock function in JEST. My Code is as follows:
// component --users
export default class Users extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.getUsers = this.getUsers.bind(this);
}
/*does an api request to get the users*/
/*async await used to handle the asynchronous behaviour*/
async getUsers() {
// Promise is resolved and value is inside of the resp const.
try {
const resp = await axios.get(
"https://jsonplaceholder.typicode.com/users"
);
if (resp.status === 200) {
const users = resp.data;
/* mapped user data to just get id and username*/
const userdata = users.map(user => {
var userObj = {};
userObj["id"] = user.id;
userObj["username"] = user.username;
return userObj;
});
return userdata;
}
} catch (err) {
console.error(err);
}
}
componentDidMount() {
this.getUsers().then(users => this.setState({ users: users }));
}
/*****************************************************************/
//props(userid ,username) are passed so that api call is made for
//getting posts of s psrticular user .
/*****************************************************************/
render() {
if (!this.state.users) {
return (
<div className="usersWrapper">
<img className="loading" src="/loading.gif" alt="Loading.." />
</div>
);
}
return (
<div className="usersWrapper">
{this.state.users.map(user => (
<div key={user.id}>
<Posts username={user.username} userid={user.id} />
</div>
))}
</div>
);
}
}
//axios.js-mockaxios
export default {
get: jest.fn(() => Promise.resolve({ data: {} }))
};
//users.test.js
describe("Users", () => {
describe("componentDidMount", () => {
it("sets the state componentDidMount", async () => {
mockAxios.get.mockImplementationOnce(
() =>
Promise.resolve({
users: [
{
id: 1,
username: "Bret"
}
]
}) //promise
);
const renderedComponent = await shallow(<Users />);
await renderedComponent.update();
expect(renderedComponent.find("users").length).toEqual(1);
});
});
});
the test fails -
FAIL src/components/users.test.js (7.437s) ● Users ›
componentDidMount › sets the state componentDidMount
expect(received).toEqual(expected)
Expected value to equal:
1
Received:
0
Please help me figure out the problem. i am totally new to testing reactapps
reactjs async-await jestjs enzyme
reactjs async-await jestjs enzyme
edited Jan 10 at 16:22
skyboyer
4,28811333
asked Jan 2 at 16:40
romaroma
104
edited Jan 10 at 16:22
skyboyer
4,28811333
asked Jan 2 at 16:40
romaroma
104
edited Jan 10 at 16:22
skyboyer
4,28811333
edited Jan 10 at 16:22
skyboyer
4,28811333
edited Jan 10 at 16:22
skyboyer
4,28811333
4,28811333
asked Jan 2 at 16:40
romaroma
104
asked Jan 2 at 16:40
romaroma
104
asked Jan 2 at 16:40
romaroma
104
104
The code in your question does not show howgetUsersis called, and does not show your test assertion. Is there acomponentDidMountmethod that you left out? Or does your test callgetUsersdirectly? What happens if you remove thetry/catch?
– Jesse Hallett
Jan 2 at 16:59
getUsers() is called in componentDidMount(). It is there in the posted code.
– roma
Jan 2 at 17:12
I'm very sorry; I missed the scrollbar somehow.
– Jesse Hallett
Jan 2 at 17:22
shallowis not an async method, you don't needawaitbefore it. It looks like test is finished earlier then component is re-rendered after got users, can you checksetTimeout( () => expect(renderedComponent.find("users").length).toEqual(1), 0)(in the very end of your test)?
– Alex
Jan 2 at 20:26
The solution you gave seems to work. test passed. Thank you.
– roma
Jan 2 at 21:54
|
show 1 more comment
The code in your question does not show howgetUsersis called, and does not show your test assertion. Is there acomponentDidMountmethod that you left out? Or does your test callgetUsersdirectly? What happens if you remove thetry/catch?
– Jesse Hallett
Jan 2 at 16:59
getUsers() is called in componentDidMount(). It is there in the posted code.
– roma
Jan 2 at 17:12
I'm very sorry; I missed the scrollbar somehow.
– Jesse Hallett
Jan 2 at 17:22
shallowis not an async method, you don't needawaitbefore it. It looks like test is finished earlier then component is re-rendered after got users, can you checksetTimeout( () => expect(renderedComponent.find("users").length).toEqual(1), 0)(in the very end of your test)?
– Alex
Jan 2 at 20:26
The solution you gave seems to work. test passed. Thank you.
– roma
Jan 2 at 21:54
The code in your question does not show how
getUsers is called, and does not show your test assertion. Is there a componentDidMount method that you left out? Or does your test call getUsers directly? What happens if you remove the try/catch?– Jesse Hallett
Jan 2 at 16:59
The code in your question does not show how
getUsers is called, and does not show your test assertion. Is there a componentDidMount method that you left out? Or does your test call getUsers directly? What happens if you remove the try/catch?– Jesse Hallett
Jan 2 at 16:59
getUsers() is called in componentDidMount(). It is there in the posted code.
– roma
Jan 2 at 17:12
getUsers() is called in componentDidMount(). It is there in the posted code.
– roma
Jan 2 at 17:12
I'm very sorry; I missed the scrollbar somehow.
– Jesse Hallett
Jan 2 at 17:22
I'm very sorry; I missed the scrollbar somehow.
– Jesse Hallett
Jan 2 at 17:22
shallow is not an async method, you don't need await before it. It looks like test is finished earlier then component is re-rendered after got users, can you check setTimeout( () => expect(renderedComponent.find("users").length).toEqual(1), 0) (in the very end of your test)?– Alex
Jan 2 at 20:26
shallow is not an async method, you don't need await before it. It looks like test is finished earlier then component is re-rendered after got users, can you check setTimeout( () => expect(renderedComponent.find("users").length).toEqual(1), 0) (in the very end of your test)?– Alex
Jan 2 at 20:26
The solution you gave seems to work. test passed. Thank you.
– roma
Jan 2 at 21:54
The solution you gave seems to work. test passed. Thank you.
– roma
Jan 2 at 21:54
|
show 1 more comment
1 Answer
1
active
oldest
votes
0
It looks like similar to this one.
The problem is that test if finished earlier then async fetchUsers and then setState (it's also async operation). To fix it you can pass done callback to test, and put the last expectation into setTimeout(fn, 0) - so expect will be called after all async operations done:
it("sets the state componentDidMount", (done) => {
...
setTimeout(() => {
expect(renderedComponent.find("users").length).toEqual(1);
done();
}, 0);
});
As mentioned in comment, it's hacky fix, I hope here will be other answers with more jest way to fix it.
answered Jan 3 at 10:02
AlexAlex
3,603823
You should not solve async unit test problems by adding timeout
– Martin Vich
Jan 3 at 10:25
@MartinVich, yeah man, I also feel it's kinda hacky way. How'd you solve it then?
– Alex
Jan 3 at 10:35
You need to tell jest that it has to wait for the promise to resolve. See jestjs.io/docs/en/tutorial-async#async-await
– Martin Vich
Jan 3 at 10:40
@MartinVich, okay, but 1) in the original question there is no way to catch resolved promise, cuz promise is incapsulated intocomponentDidMount2) Even if we catch the moment in 1, how would you catchsetStatefinish moment? It's also async... Can you elaborate an answer? I'm pretty curious how it can becorrectlysolved
– Alex
Jan 3 at 10:44
That's correct. I think thatcomponentDidMounttest should mockgetUsersto return some value and then test that the value is passed tosetState. Then in separate testgetUsersshould be checked if it returns mocked async results
– Martin Vich
Jan 3 at 10:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009989%2fhow-to-test-an-async-function-which-does-an-axios-request-to-an-api-using-jest-i%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It looks like similar to this one.
The problem is that test if finished earlier then async fetchUsers and then setState (it's also async operation). To fix it you can pass done callback to test, and put the last expectation into setTimeout(fn, 0) - so expect will be called after all async operations done:
it("sets the state componentDidMount", (done) => {
...
setTimeout(() => {
expect(renderedComponent.find("users").length).toEqual(1);
done();
}, 0);
});
As mentioned in comment, it's hacky fix, I hope here will be other answers with more jest way to fix it.
answered Jan 3 at 10:02
AlexAlex
3,603823
You should not solve async unit test problems by adding timeout
– Martin Vich
Jan 3 at 10:25
@MartinVich, yeah man, I also feel it's kinda hacky way. How'd you solve it then?
– Alex
Jan 3 at 10:35
You need to tell jest that it has to wait for the promise to resolve. See jestjs.io/docs/en/tutorial-async#async-await
– Martin Vich
Jan 3 at 10:40
@MartinVich, okay, but 1) in the original question there is no way to catch resolved promise, cuz promise is incapsulated intocomponentDidMount2) Even if we catch the moment in 1, how would you catchsetStatefinish moment? It's also async... Can you elaborate an answer? I'm pretty curious how it can becorrectlysolved
– Alex
Jan 3 at 10:44
That's correct. I think thatcomponentDidMounttest should mockgetUsersto return some value and then test that the value is passed tosetState. Then in separate testgetUsersshould be checked if it returns mocked async results
– Martin Vich
Jan 3 at 10:54
add a comment |
0
It looks like similar to this one.
The problem is that test if finished earlier then async fetchUsers and then setState (it's also async operation). To fix it you can pass done callback to test, and put the last expectation into setTimeout(fn, 0) - so expect will be called after all async operations done:
it("sets the state componentDidMount", (done) => {
...
setTimeout(() => {
expect(renderedComponent.find("users").length).toEqual(1);
done();
}, 0);
});
As mentioned in comment, it's hacky fix, I hope here will be other answers with more jest way to fix it.
answered Jan 3 at 10:02
AlexAlex
3,603823
You should not solve async unit test problems by adding timeout
– Martin Vich
Jan 3 at 10:25
@MartinVich, yeah man, I also feel it's kinda hacky way. How'd you solve it then?
– Alex
Jan 3 at 10:35
You need to tell jest that it has to wait for the promise to resolve. See jestjs.io/docs/en/tutorial-async#async-await
– Martin Vich
Jan 3 at 10:40
@MartinVich, okay, but 1) in the original question there is no way to catch resolved promise, cuz promise is incapsulated intocomponentDidMount2) Even if we catch the moment in 1, how would you catchsetStatefinish moment? It's also async... Can you elaborate an answer? I'm pretty curious how it can becorrectlysolved
– Alex
Jan 3 at 10:44
That's correct. I think thatcomponentDidMounttest should mockgetUsersto return some value and then test that the value is passed tosetState. Then in separate testgetUsersshould be checked if it returns mocked async results
– Martin Vich
Jan 3 at 10:54
add a comment |
0
0
0
It looks like similar to this one.
The problem is that test if finished earlier then async fetchUsers and then setState (it's also async operation). To fix it you can pass done callback to test, and put the last expectation into setTimeout(fn, 0) - so expect will be called after all async operations done:
it("sets the state componentDidMount", (done) => {
...
setTimeout(() => {
expect(renderedComponent.find("users").length).toEqual(1);
done();
}, 0);
});
As mentioned in comment, it's hacky fix, I hope here will be other answers with more jest way to fix it.
answered Jan 3 at 10:02
AlexAlex
3,603823
It looks like similar to this one.
The problem is that test if finished earlier then async fetchUsers and then setState (it's also async operation). To fix it you can pass done callback to test, and put the last expectation into setTimeout(fn, 0) - so expect will be called after all async operations done:
it("sets the state componentDidMount", (done) => {
...
setTimeout(() => {
expect(renderedComponent.find("users").length).toEqual(1);
done();
}, 0);
});
As mentioned in comment, it's hacky fix, I hope here will be other answers with more jest way to fix it.
answered Jan 3 at 10:02
AlexAlex
3,603823
edited Jan 3 at 11:01
answered Jan 3 at 10:02
AlexAlex
3,603823
answered Jan 3 at 10:02
AlexAlex
3,603823
answered Jan 3 at 10:02
AlexAlex
3,603823
3,603823
You should not solve async unit test problems by adding timeout
– Martin Vich
Jan 3 at 10:25
@MartinVich, yeah man, I also feel it's kinda hacky way. How'd you solve it then?
– Alex
Jan 3 at 10:35
You need to tell jest that it has to wait for the promise to resolve. See jestjs.io/docs/en/tutorial-async#async-await
– Martin Vich
Jan 3 at 10:40
@MartinVich, okay, but 1) in the original question there is no way to catch resolved promise, cuz promise is incapsulated intocomponentDidMount2) Even if we catch the moment in 1, how would you catchsetStatefinish moment? It's also async... Can you elaborate an answer? I'm pretty curious how it can becorrectlysolved
– Alex
Jan 3 at 10:44
That's correct. I think thatcomponentDidMounttest should mockgetUsersto return some value and then test that the value is passed tosetState. Then in separate testgetUsersshould be checked if it returns mocked async results
– Martin Vich
Jan 3 at 10:54
add a comment |
You should not solve async unit test problems by adding timeout
– Martin Vich
Jan 3 at 10:25
@MartinVich, yeah man, I also feel it's kinda hacky way. How'd you solve it then?
– Alex
Jan 3 at 10:35
You need to tell jest that it has to wait for the promise to resolve. See jestjs.io/docs/en/tutorial-async#async-await
– Martin Vich
Jan 3 at 10:40
@MartinVich, okay, but 1) in the original question there is no way to catch resolved promise, cuz promise is incapsulated intocomponentDidMount2) Even if we catch the moment in 1, how would you catchsetStatefinish moment? It's also async... Can you elaborate an answer? I'm pretty curious how it can becorrectlysolved
– Alex
Jan 3 at 10:44
That's correct. I think thatcomponentDidMounttest should mockgetUsersto return some value and then test that the value is passed tosetState. Then in separate testgetUsersshould be checked if it returns mocked async results
– Martin Vich
Jan 3 at 10:54
You should not solve async unit test problems by adding timeout
– Martin Vich
Jan 3 at 10:25
You should not solve async unit test problems by adding timeout
– Martin Vich
Jan 3 at 10:25
@MartinVich, yeah man, I also feel it's kinda hacky way. How'd you solve it then?
– Alex
Jan 3 at 10:35
@MartinVich, yeah man, I also feel it's kinda hacky way. How'd you solve it then?
– Alex
Jan 3 at 10:35
You need to tell jest that it has to wait for the promise to resolve. See jestjs.io/docs/en/tutorial-async#async-await
– Martin Vich
Jan 3 at 10:40
You need to tell jest that it has to wait for the promise to resolve. See jestjs.io/docs/en/tutorial-async#async-await
– Martin Vich
Jan 3 at 10:40
@MartinVich, okay, but 1) in the original question there is no way to catch resolved promise, cuz promise is incapsulated into
componentDidMount 2) Even if we catch the moment in 1, how would you catch setState finish moment? It's also async... Can you elaborate an answer? I'm pretty curious how it can be correctly solved– Alex
Jan 3 at 10:44
@MartinVich, okay, but 1) in the original question there is no way to catch resolved promise, cuz promise is incapsulated into
componentDidMount 2) Even if we catch the moment in 1, how would you catch setState finish moment? It's also async... Can you elaborate an answer? I'm pretty curious how it can be correctly solved– Alex
Jan 3 at 10:44
That's correct. I think that
componentDidMount test should mock getUsers to return some value and then test that the value is passed to setState. Then in separate test getUsers should be checked if it returns mocked async results– Martin Vich
Jan 3 at 10:54
That's correct. I think that
componentDidMount test should mock getUsers to return some value and then test that the value is passed to setState. Then in separate test getUsers should be checked if it returns mocked async results– Martin Vich
Jan 3 at 10:54
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54009989%2fhow-to-test-an-async-function-which-does-an-axios-request-to-an-api-using-jest-i%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The code in your question does not show how
getUsersis called, and does not show your test assertion. Is there acomponentDidMountmethod that you left out? Or does your test callgetUsersdirectly? What happens if you remove thetry/catch?– Jesse Hallett
Jan 2 at 16:59
getUsers() is called in componentDidMount(). It is there in the posted code.
– roma
Jan 2 at 17:12
I'm very sorry; I missed the scrollbar somehow.
– Jesse Hallett
Jan 2 at 17:22
shallowis not an async method, you don't needawaitbefore it. It looks like test is finished earlier then component is re-rendered after got users, can you checksetTimeout( () => expect(renderedComponent.find("users").length).toEqual(1), 0)(in the very end of your test)?– Alex
Jan 2 at 20:26
The solution you gave seems to work. test passed. Thank you.
– roma
Jan 2 at 21:54