follow jest docs to mock axios but not working

Question

I flow the jest document to mock module 'axios'

like this

// httpCall.js
import axios from 'axios'
export default function httpCall () {
  return axios.get('url/to/the/end/point').then(res => res.data)
}

and my test file

import axios from 'axios'
import httpCall from './index'
jest.mock('axios')
test('mock module axios', () => {
  const resp = { data: { id: 1, name: 'John Doe' } }
  axios.mockResolvedValue(resp)
  return httpCall().then(res => expect(res).toEqual(resp.data))
})

and then got this error

TypeError: _axios.default.mockResolvedValue is not a function

so I try to google it, then try Mock inner axios.create()

create mocks /axios-mock.js

const mockAxios = jest.genMockFromModule('axios')
mockAxios.create = jest.fn(() => mockAxios)
export default mockAxios

then update my test file to this

import mockAxios from './__mocks__/axios-mock'
import httpCall from './index'
test('mock module axios', () => {
  const resp = { data: { id: 1, name: 'John Doe' } }
  mockAxios.get.mockResolvedValue(resp)
  return httpCall().then(res => expect(res).toEqual(resp.data))
})

but still got error like below

Request failed with status code 404

I have no idea about this... but the end I make it working..

this is my mock file

// __mocks__/axios-mock.js
import axios from 'axios'
const mockAxios = jest.genMockFromModule('axios')
export default axios

// or even like this
import axios from 'axios'
jest.mock('axios')
export default axios

this is my test file

import httpCall from './index'
import mockAxios from './__mocks__/axios-mock'

describe('mock module', () => {
  it('axios should be mocked', () => {
    const resp = { data: { id: 1, name: 'John Doe' } }
    mockAxios.get = jest.fn().mockResolvedValue(resp)
    return httpCall().then(res => expect(res).toEqual(resp.data))
  })
})

after it I try move the axios-mock code to test file like this below

import axios from 'axios'
import httpCall from './index'
const mockAxios = jest.genMockFromModule('axios')

describe('mock module', () => {
  it('axios should be mocked', () => {
    const resp = { data: { id: 1, name: 'John Doe' } }
    mockAxios.get = jest.fn().mockResolvedValue(resp)
    return httpCall().then(res => expect(res).toEqual(resp.data))
  })
})

I got this error again

Request failed with status code 404

this is my envinfo

System:
    OS: macOS 10.14
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  npmPackages:
    jest: ^23.6.0 => 23.6.0

my .babelrc

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": "umd"
      }
    ]
  ]
}

my jest.config.js

module.exports = {

}

I hope someone can explain why this is the case

and the jest mock module document is really working ?

Answer 1

now its working, the issue is my .babelrc file

should like this

{
  "presets": [
    [
      "@babel/env"
    ]
  ]
}

or

{
  "presets": [
    [
      "@babel/env",
      {
        "modules": "umd"
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        [
          "@babel/env"
        ]
      ]
    }
  }
}