How to make a promise to be rejected in a Jest Manual Mock
I have a component that after being mounted calls a function to get some data from pouchdb. I have a driver/facade that uses the pouchdb api internally to get this data after syncing with a remote database. Now for my test i have provided a manual mock so I can mock the result/response to avoid using pouchdb directly. This is working fine but I now want to test the reject block and since my manual mock always resolves I'm getting stock on how to test this part. Here is my test :
Component Code
// getData gets called in componentDidMount
public getData() {
// The test will use the mock implementation which returns a
// resolved promise
this.driver.getData().then(
(sessions: Session) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(sessions),
didSync: true,
sessions: sessions
});
},
// How can I force my mock implementation to reject the promise so
// I can test this block ?
error => {
// Send a log error to a backend API
this.setState({ didSync: false });
}
);
}
Test
// This uses the mock implementation which returns a promise
jest.mock("../../../modules/pouchdb/WebDriver");
let wrapper: ShallowWrapper | ReactWrapper;
let instance;
// This is the response my mock driver returns
const data = SessionsQAResponseMock.getSessionsResponse();
describe('My Component Tests', () => {
beforeEach(() => {
wrapper = shallow(<AttendeesHomeComponent userRole={Roles.Attendee}
/>);
instance = wrapper.instance();
expect(wrapper).toMatchSnapshot();
});
// This tests works (Successful Promise)
it('Tests Resolves Promise', done => {
const emptyContent = wrapper.find(EmptyContentComponent);
expect(emptyContent.exists()).toBeTruthy();
expect(instance.state.didSync).toBeFalsy();
expect(instance.state.sessions).toEqual();
setTimeout(() => {
// Webdriver resolves
expect(instance.state.didSync).toBeTruthy();
expect(instance.state.sessions).toEqual(data);
// After we got data our component should display a ListView
const listView = wrapper.find(ListView);
expect(listView.exists()).toBeTruthy();
// We're done testing
done();
}, 0);
});
// This test fails. The mock is still resolving the promise. and the
// states updates to {dydSync: true}
it("Test Error Block", done => {
// driver is an instance variable
instance.driver.getSessions = jest.fn()
.mockReturnValue(Promise.reject({ error: "Failed" }));
setTimeout(() => {
// expect(instance.state.sessions).toEqual();
expect(instance.state.didSync).toBeFalsy();
done();
}, 0);
});
})
reactjs typescript unit-testing jestjs enzyme
add a comment |
I have a component that after being mounted calls a function to get some data from pouchdb. I have a driver/facade that uses the pouchdb api internally to get this data after syncing with a remote database. Now for my test i have provided a manual mock so I can mock the result/response to avoid using pouchdb directly. This is working fine but I now want to test the reject block and since my manual mock always resolves I'm getting stock on how to test this part. Here is my test :
Component Code
// getData gets called in componentDidMount
public getData() {
// The test will use the mock implementation which returns a
// resolved promise
this.driver.getData().then(
(sessions: Session) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(sessions),
didSync: true,
sessions: sessions
});
},
// How can I force my mock implementation to reject the promise so
// I can test this block ?
error => {
// Send a log error to a backend API
this.setState({ didSync: false });
}
);
}
Test
// This uses the mock implementation which returns a promise
jest.mock("../../../modules/pouchdb/WebDriver");
let wrapper: ShallowWrapper | ReactWrapper;
let instance;
// This is the response my mock driver returns
const data = SessionsQAResponseMock.getSessionsResponse();
describe('My Component Tests', () => {
beforeEach(() => {
wrapper = shallow(<AttendeesHomeComponent userRole={Roles.Attendee}
/>);
instance = wrapper.instance();
expect(wrapper).toMatchSnapshot();
});
// This tests works (Successful Promise)
it('Tests Resolves Promise', done => {
const emptyContent = wrapper.find(EmptyContentComponent);
expect(emptyContent.exists()).toBeTruthy();
expect(instance.state.didSync).toBeFalsy();
expect(instance.state.sessions).toEqual();
setTimeout(() => {
// Webdriver resolves
expect(instance.state.didSync).toBeTruthy();
expect(instance.state.sessions).toEqual(data);
// After we got data our component should display a ListView
const listView = wrapper.find(ListView);
expect(listView.exists()).toBeTruthy();
// We're done testing
done();
}, 0);
});
// This test fails. The mock is still resolving the promise. and the
// states updates to {dydSync: true}
it("Test Error Block", done => {
// driver is an instance variable
instance.driver.getSessions = jest.fn()
.mockReturnValue(Promise.reject({ error: "Failed" }));
setTimeout(() => {
// expect(instance.state.sessions).toEqual();
expect(instance.state.didSync).toBeFalsy();
done();
}, 0);
});
})
reactjs typescript unit-testing jestjs enzyme
add a comment |
I have a component that after being mounted calls a function to get some data from pouchdb. I have a driver/facade that uses the pouchdb api internally to get this data after syncing with a remote database. Now for my test i have provided a manual mock so I can mock the result/response to avoid using pouchdb directly. This is working fine but I now want to test the reject block and since my manual mock always resolves I'm getting stock on how to test this part. Here is my test :
Component Code
// getData gets called in componentDidMount
public getData() {
// The test will use the mock implementation which returns a
// resolved promise
this.driver.getData().then(
(sessions: Session) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(sessions),
didSync: true,
sessions: sessions
});
},
// How can I force my mock implementation to reject the promise so
// I can test this block ?
error => {
// Send a log error to a backend API
this.setState({ didSync: false });
}
);
}
Test
// This uses the mock implementation which returns a promise
jest.mock("../../../modules/pouchdb/WebDriver");
let wrapper: ShallowWrapper | ReactWrapper;
let instance;
// This is the response my mock driver returns
const data = SessionsQAResponseMock.getSessionsResponse();
describe('My Component Tests', () => {
beforeEach(() => {
wrapper = shallow(<AttendeesHomeComponent userRole={Roles.Attendee}
/>);
instance = wrapper.instance();
expect(wrapper).toMatchSnapshot();
});
// This tests works (Successful Promise)
it('Tests Resolves Promise', done => {
const emptyContent = wrapper.find(EmptyContentComponent);
expect(emptyContent.exists()).toBeTruthy();
expect(instance.state.didSync).toBeFalsy();
expect(instance.state.sessions).toEqual();
setTimeout(() => {
// Webdriver resolves
expect(instance.state.didSync).toBeTruthy();
expect(instance.state.sessions).toEqual(data);
// After we got data our component should display a ListView
const listView = wrapper.find(ListView);
expect(listView.exists()).toBeTruthy();
// We're done testing
done();
}, 0);
});
// This test fails. The mock is still resolving the promise. and the
// states updates to {dydSync: true}
it("Test Error Block", done => {
// driver is an instance variable
instance.driver.getSessions = jest.fn()
.mockReturnValue(Promise.reject({ error: "Failed" }));
setTimeout(() => {
// expect(instance.state.sessions).toEqual();
expect(instance.state.didSync).toBeFalsy();
done();
}, 0);
});
})
reactjs typescript unit-testing jestjs enzyme
I have a component that after being mounted calls a function to get some data from pouchdb. I have a driver/facade that uses the pouchdb api internally to get this data after syncing with a remote database. Now for my test i have provided a manual mock so I can mock the result/response to avoid using pouchdb directly. This is working fine but I now want to test the reject block and since my manual mock always resolves I'm getting stock on how to test this part. Here is my test :
Component Code
// getData gets called in componentDidMount
public getData() {
// The test will use the mock implementation which returns a
// resolved promise
this.driver.getData().then(
(sessions: Session) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(sessions),
didSync: true,
sessions: sessions
});
},
// How can I force my mock implementation to reject the promise so
// I can test this block ?
error => {
// Send a log error to a backend API
this.setState({ didSync: false });
}
);
}
Test
// This uses the mock implementation which returns a promise
jest.mock("../../../modules/pouchdb/WebDriver");
let wrapper: ShallowWrapper | ReactWrapper;
let instance;
// This is the response my mock driver returns
const data = SessionsQAResponseMock.getSessionsResponse();
describe('My Component Tests', () => {
beforeEach(() => {
wrapper = shallow(<AttendeesHomeComponent userRole={Roles.Attendee}
/>);
instance = wrapper.instance();
expect(wrapper).toMatchSnapshot();
});
// This tests works (Successful Promise)
it('Tests Resolves Promise', done => {
const emptyContent = wrapper.find(EmptyContentComponent);
expect(emptyContent.exists()).toBeTruthy();
expect(instance.state.didSync).toBeFalsy();
expect(instance.state.sessions).toEqual();
setTimeout(() => {
// Webdriver resolves
expect(instance.state.didSync).toBeTruthy();
expect(instance.state.sessions).toEqual(data);
// After we got data our component should display a ListView
const listView = wrapper.find(ListView);
expect(listView.exists()).toBeTruthy();
// We're done testing
done();
}, 0);
});
// This test fails. The mock is still resolving the promise. and the
// states updates to {dydSync: true}
it("Test Error Block", done => {
// driver is an instance variable
instance.driver.getSessions = jest.fn()
.mockReturnValue(Promise.reject({ error: "Failed" }));
setTimeout(() => {
// expect(instance.state.sessions).toEqual();
expect(instance.state.didSync).toBeFalsy();
done();
}, 0);
});
})
reactjs typescript unit-testing jestjs enzyme
reactjs typescript unit-testing jestjs enzyme
edited Nov 16 '18 at 7:36
skyboyer
4,15811333
4,15811333
asked Nov 16 '18 at 1:37
OscarSOscarS
13
13
add a comment |
add a comment |
0
active
oldest
votes
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
});
}
});
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%2f53330248%2fhow-to-make-a-promise-to-be-rejected-in-a-jest-manual-mock%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53330248%2fhow-to-make-a-promise-to-be-rejected-in-a-jest-manual-mock%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