How to make a promise to be rejected in a Jest Manual Mock












0















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);
});
})









share|improve this question





























    0















    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);
    });
    })









    share|improve this question



























      0












      0








      0








      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);
      });
      })









      share|improve this question
















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 16 '18 at 7:36









      skyboyer

      4,15811333




      4,15811333










      asked Nov 16 '18 at 1:37









      OscarSOscarS

      13




      13
























          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
          });


          }
          });














          draft saved

          draft discarded


















          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
















          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














          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





















































          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







          Popular posts from this blog

          Florida Star v. B. J. F.

          Danny Elfman

          Retrieve a Users Dashboard in Tumblr with R and TumblR. Oauth Issues