I am using Jest with ES2015, trying to test this ponent that makes an ajax call (ajax call done with jQuery) on form submit. I'm just trying to mock the value returned and test the value is updated in the ponent. But I receive this error:

  - TypeError: Cannot read property 'then' of undefined

Below is the code for ajax call:

accountValidate(name, email).then(this.showMsg);

showMsg(response) {
    if (!response.authenticated) {
      this.setState({msg: response.msg})
    }
  }

accountValidate(name, email) {
    return($.ajax({
      type: 'POST',
      url: `/users/authenticate`,
      headers: { 
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      dataType: 'json',
      data: JSON.stringify({name: name, email: email})
    }));
  }

Here is the code for Jest:

let testMsg = {msg: 'testing msg'}
const msgResponse = Promise.resolve(testMsg);
accountValidate.mockClear();
accountValidate.mockReturnValue(msgResponse);

      return msgResponse.then(() => {
          console.log('test');
      });

I am using Jest with ES2015, trying to test this ponent that makes an ajax call (ajax call done with jQuery) on form submit. I'm just trying to mock the value returned and test the value is updated in the ponent. But I receive this error:

  - TypeError: Cannot read property 'then' of undefined

Below is the code for ajax call:

accountValidate(name, email).then(this.showMsg);

showMsg(response) {
    if (!response.authenticated) {
      this.setState({msg: response.msg})
    }
  }

accountValidate(name, email) {
    return($.ajax({
      type: 'POST',
      url: `/users/authenticate`,
      headers: { 
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      dataType: 'json',
      data: JSON.stringify({name: name, email: email})
    }));
  }

Here is the code for Jest:

let testMsg = {msg: 'testing msg'}
const msgResponse = Promise.resolve(testMsg);
accountValidate.mockClear();
accountValidate.mockReturnValue(msgResponse);

      return msgResponse.then(() => {
          console.log('test');
      });

• javascript
• ajax
• reactjs
• jestjs

Share Improve this question Follow edited Jun 8, 2016 at 10:01 BioGeek 23k2323 gold badges9090 silver badges155155 bronze badges asked Jun 3, 2016 at 3:17 sayayinsayayin 1,04166 gold badges2525 silver badges4343 bronze badges 6

• 1 The error implies either accountValidate returns undefined or errorResponse is undefined – MinusFour Commented Jun 3, 2016 at 3:23
• but the ponent is working fine. I am able to make the ajax call, receive data in response and update the ponent. Only the test fails. – sayayin Commented Jun 3, 2016 at 3:25
• 1 Is accountValidate defined as a function somewhere in your code? It's kind of unclear where this code is being pulled from - the this.setState() calls make me think this is part of a React ponent? – Nick Zuber Commented Jun 3, 2016 at 3:25
• Yes it is defined, you can see above. And yes it is React.js with ES2015 – sayayin Commented Jun 3, 2016 at 3:27
• @sayayin, what is errorResponse? – MinusFour Commented Jun 3, 2016 at 3:30

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

It's really late but maybe it helps someone. I would try it like that:

let testMsg = {msg: 'testing msg'}

beforeEach(() => {
      (accountValidate: any).mockClear();
      (accountValidate: any).mockReturnValue(
        new Promise(resolve => {
          resolve(testMsg);
        })
      );
    });

Hi we were getting the same error in the test env we are using the typescript , testing-library/react

I was using node v 14.X but other person was using node 16.X and above they were getting this error. So I updated my node version then able to replicate it on my local.

Then In test file, added the mockcall in the act, as it is affecting in updating the state also

act(() => {
  mockAxios.post.mockImplementation(
    async () => Promise.resolve(availabilitySuccessMockData)
  );
});