Mock inner axios.create()

by

OK I got it. Here is how I fixed it! I ended up doing without any mocking libraries for axios!

Create a mock for axios in src/__mocks__:

// src/__mocks__/axios.ts

const mockAxios = jest.genMockFromModule('axios')

// this is the key to fix the axios.create() undefined error!
mockAxios.create = jest.fn(() => mockAxios)

export default mockAxios

Then in your test file, the gist would look like:

import mockAxios from 'axios'
import configureMockStore from 'redux-mock-store'
import thunk from 'redux-thunk'

// for some reason i need this to fix reducer keys undefined errors..
jest.mock('../../store/rootStore.ts')

// you need the 'async'!
test('Retrieve transaction data based on a date range', async () => {
  const middlewares = [thunk]
  const mockStore = configureMockStore(middlewares)
  const store = mockStore()

  const mockData = {
    'data': 123
  }

  /** 
   *  SETUP
   *  This is where you override the 'post' method of your mocked axios and return
   *  mocked data in an appropriate data structure-- {data: YOUR_DATA} -- which
   *  mirrors the actual API call, in this case, the 'reportGet'
   */
  mockAxios.post.mockImplementationOnce(() =>
    Promise.resolve({ data: mockData }),
  )

  const expectedActions = [
    { type: REQUEST_TRANSACTION_DATA },
    { type: RECEIVE_TRANSACTION_DATA, data: mockData },
  ]

  // work
  await store.dispatch(reportGet())

  // assertions / expects
  expect(store.getActions()).toEqual(expectedActions)
  expect(mockAxios.post).toHaveBeenCalledTimes(1)
})

More Related Contents:

  1. How do I test axios in Jest?
  2. Jest – SyntaxError: Cannot use import statement outside a module
  3. Trying to use fetch and pass in mode: no-cors
  4. The create-react-app imports restriction outside of src directory
  5. How do I set multipart in axios with react?
  6. ReactJS – Lifting state up vs keeping a local state
  7. How to overcome the CORS issue in ReactJS
  8. npm start error with create-react-app
  9. How do you send images to node js with Axios?
  10. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  11. where is create-react-app webpack config and files?
  12. Access Control Origin Header error using Axios
  13. Where’s the connection between index.html and index.js in a Create-React-App application?
  14. Best way to polyfill ES6 features in React app that uses create-react-app
  15. Using JavaScript Axios/Fetch. Can you disable browser cache?
  16. body data not sent in axios request
  17. How to use create-react-app with an older React version?
  18. How can I use Jest to spy on a method call?
  19. Axios posting params not read by $_POST
  20. Simulate a button click in Jest
  21. Axios – DELETE Request With Request Body and Headers?
  22. React: Axios Network Error
  23. Increase JavaScript Heap size in create-react-app project
  24. How to mock Axios with Jest?
  25. Service Worker registration error: Unsupported MIME type (‘text/html’)
  26. How to mock React component methods with jest and enzyme
  27. Jest matcher to match any one of three values
  28. FastAPI is not returning cookies to React frontend
  29. How to download a file using ReactJS with Axios in the frontend and FastAPI in the backend?
  30. create-react-app is showing all my code in production, how to hide it?

Leave a Comment