Jest: 'mockImplementation' and 'mockResolvedValue' are not functions when mock 'axios'

[egor-sorokin]

Do you want to request a _feature_ or report a _bug_?
Probably a bug

What is the current behavior?
When I try to mock axios as in docs and run my test it's failed:

import React from 'react';
import axios from 'axios';
import withFetching from './api';
import Educations from '../components/Educations/index';
import { URL_PATH_EDUCATIONS } from '../constants/index'
import { shallow, render, mount } from 'enzyme';


describe('WithFetching', () => {
  const WithFetching = withFetching(URL_PATH_EDUCATIONS, Educations); // withFetching is HOC

  jest.mock('axios');

  it('should fetch educations', () => {
    const resp = { data: [{ name: 'FooBar' }]};
    axios.get.mockImplementation(() => Promise.resolve(resp));

    return wrapper._fetchData().then(educations => expect(educations).toEqual(resp.data));
  });
});

And it shows me the error:
TypeError: _axios2.default.get.mockImplementation is not a function
The same happens with
axios.get.**mockResolvedValue**(resp);

What is the expected behavior?
No error is presented and mockResolvedValue(resp), mockImplementation are functions and work as described in docs

Please provide your exact Jest configuration
From my package.json

...
"jest": {
    "verbose": true,
    "transform": {
      "^.+\\.js$": "babel-jest"
    },
    "globals": {
      "NODE_ENV": "test"
    },
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleNameMapper": {
      "^.+\\.(css|scss)$": "identity-obj-proxy"
    },
    "setupFiles": [
      "./test/jestsetup.js"
    ],
    "snapshotSerializers": [
      "./node_modules/enzyme-to-json/serializer"
    ]
  },
"devDependencies": {
    ...
    "axios": "^0.18.0",
    "babel-jest": "^22.4.3",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-to-json": "^3.3.3",
    "jest": "^22.4.3",
    "react": "^16.3.1",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.3.1",
    "react-test-renderer": "^16.3.1",
    ...
  },

jestsetup.js:

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// Before using Jest in React@16 and React@15 Adapter has to be installed
configure({ adapter: new Adapter() });

console.error = message => {
   throw new Error(message);
};

Enviroment:

  System:
    OS: macOS High Sierra 10.13.3
    CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
  Binaries:
    Node: 9.8.0
    Yarn: 1.5.1
    npm: 5.8.0
  npmPackages:
    jest:
      wanted: ^22.4.3
      installed: 22.4.3

I already saw the Issue#5962 and I am not sure but they are maybe connected somehow

[SimenB]

jest.mock is hoisted to the top of its scope, not the top of Program. Just move jest.mock to the same scope as your import.

@@ -5,12 +5,11 @@ import Educations from '../components/Educations/index';
 import { URL_PATH_EDUCATIONS } from '../constants/index'
 import { shallow, render, mount } from 'enzyme';

+jest.mock('axios');

 describe('WithFetching', () => {
   const WithFetching = withFetching(URL_PATH_EDUCATIONS, Educations); // withFetching is HOC

-  jest.mock('axios');
-
   it('should fetch educations', () => {
     const resp = { data: [{ name: 'FooBar' }]};
     axios.get.mockImplementation(() => Promise.resolve(resp));

Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

[egor-sorokin]

Thanks! I just haven't found that we have to keep jest.mock and import in the same scope.

[SimenB]

PR welcome to update/clarify docs 🙂

[rkentmc]

I am having the same issue and my jest.mock('axios'); is in scope with import.
```import React from 'react';
import ReactDOM from 'react-dom';
import App from '../App';
import renderer from 'react-test-renderer';
import axios from 'axios';
import Dropdown from '../Dropdown';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

jest.mock('axios');

configure({ adapter: new Adapter() });

test ('mock API call', () => {
const resp = { data: [{name: 'Data'}]};
axios.get.mockResolvedValue(resp);
console.log(Dropdown.componentDidMount());

return Dropdown.componentDidMount().then(app => expect(app).toContain(resp.data))

});

├── public
└── src
├── __tests__
│   └── __snapshots__
└── main
└── resources
└── META-INF
```

I am using the CRA package.json with the react-scripts.

I am getting the error:
TypeError: _axios2.default.get.mockResolvedValue is not a function

[SimenB]

See #6832

[rochabianca]

same problem here on Vue