TypeError: Cannot read properties of undefined (reading 'then') in component axios call

[KeynesYouDigIt]

Version: "jest-mock-axios": "^4.6.1"

I have a react component that binds a function to an onClick event

<Button
...
    onClick={this.handleSave}

and it makes an http call

  handleSave() {
....
    const api = `/some/path}`;

    axios.post(api, this.data).then (
        ...
    )

I set up mockAxios as suggested by the read me. For some reason, when I .simulate('click') on the button node, I get this crap, like post didnt return a promise?

    TypeError: Cannot read properties of undefined (reading 'then')

    > 306 |     axios
          |     ^
      307 |       .post(api, this.state.data)
      308 |       .then((response) => {
      309 |         const result = response.data;

Does anyone know if axios being nested in a function means the mock wont work? or is there another thread to tug at?

[kingjan1999]

Hi,

thanks for raising this issue. Can you do console.log(axioms); or similar, to make sure the axioms instance is infact mocked correctly?

[KeynesYouDigIt]

Sure thing!

looks like it is to me

  console.log
    HELLO INSIDE COMPONENT

      at MyComponent.handleSave (/MyComponent.js:307:13)

  console.log
    [Function: mockConstructor] {
   ....

Let me know if you'd like the full output. I will mess around in the debugger and add any interesting data I can find.

[KeynesYouDigIt]

This is what I see in the debug console.... odd.... (breakpoint is inside the component function that uses axios)

axios
{default: ƒ, __esModule: true}
axios.post
undefined

[kingjan1999]

Can you try going to v4.5.0?

[KeynesYouDigIt]

Same error I am afraid, thanks so much for helping me look in to this

[kingjan1999]

What does your import look like?

[KeynesYouDigIt]

// __mocks__/axios.js
import mockAxios from 'jest-mock-axios';
export default mockAxios;

// someTest.test.js
import mockAxios from 'jest-mock-axios';

[kingjan1999]

That's strange. I'll try to look into this on the weekend

[KeynesYouDigIt]

Much appreciated! I couldnt get axios-mock-adapter to work either, nor my own mocks, so it may well not be an issue with this particular library. Perhaps having an axios call nested in a component method is not something commonly tested this way? Its also possible my jest env is mucking something up, I just don't know what.

[kingjan1999]

Hi,

coming back on this, I was unable to reproduce this. I tried modifying my React test repo a bit to have a code snippet similar to yours (diff). However, this works fine for me. Maybe you can take a look if there is a significant difference between the code in the repo and your own code?

[KeynesYouDigIt]

Aha,

// package.json
  "jest": {
    "resetMocks": false
  },

Appears to change the behavior to work... which is odd because false is the default? https://jestjs.io/docs/configuration#resetmocks-boolean

We are running older versions of several libraries, so I suspect the issue is there. thanks for the help! sorry that this was not an issue with the library, I might turn it in to a stack overflow thread.

[kingjan1999]

Thanks for finding this out! This is very interesting, as the behavior used to be different when resetMocks was true (as described in #63)

[FlorianCassayre]

@KeynesYouDigIt's snippet worked for me, thanks, saved me an hour of debugging. Not sure why though.