React: JSDOM 13 Error: Error: connect ECONNREFUSED 127.0.0.1:80

Viewed 3500

I've created a test for a custom hook. all test pass but I receive the error and not sure how to find the root cause. I've trying going through this link but I was unable to find any helpful information. The hook is just has an axios request. there is no part where I'm directly assigning the location.href which is another thing i've seen that's usually the cause for this error

import axios from 'axios'

jest.mock('axios')
describe('hooks', ()=>{

  it('test custom hook', async()=>{
    const { result, waitForNextUpdate } = await renderHook(()=> customHook())
    axios.get.mockResolvedValue(dataJSON)
    expect(axios.get).toHaveBeenCalledTimes(1) // received 0
    await waitForNextUpdate()
    expect(axios.get).toHaveBeenCalledTimes(1) //received 2
  })
})

error:

console.error node_modules/jest-environment-jsdom-thirteen/node_modules/jsdom/lib/jsdom/virtual-console.js:29
    Error: Error: connect ECONNREFUSED 127.0.0.1:80
        at Object.dispatchError (C:\project\node_modules\jest-environment-jsdom-thirteen\node_modules\jsdom\lib\jsdom\living\xhr-utils.js:60:19)
        at Request.client.on.err (C:\project\node_modules\jest-environment-jsdom-thirteen\node_modules\jsdom\lib\jsdom\living\xmlhttprequest.js:674:20)
        at Request.emit (events.js:203:15)
        at Request.onRequestError (C:\project\node_modules\request\request.js:877:8)
        at ClientRequest.emit (events.js:198:13)
        at Socket.socketErrorListener (_http_client.js:401:9)
        at Socket.emit (events.js:198:13)
        at emitErrorNT (internal/streams/destroy.js:91:8)
        at emitErrorAndCloseNT (internal/streams/destroy.js:59:3)
        at process._tickCallback (internal/process/next_tick.js:63:19) undefined

jest-config:

"jest": {
    "moduleNameMapper": {
      "\\.(css|less|sass)$": "<rootDir>/_mocks_/styleMock.js"
    },
    "collectCoverageFrom": [
      "**/*.{js,jsx,ts,tsx}",
      "!<rootDir>/node_modules/",
      "!src/index.js",
      "!src/i18n.js",
      "!<rootDir>/_mocks_/*",
      "!src/setupProxy.js",
    ]
  }

custom hook:

import { useState, useEffect, useCallback } from 'react'
import axios from 'axios'

const userDetailState = {
  userInfo: '',
  loading: true,
  errorText: '',

}

export const customHook = () => {
  const [userDetails, setUserDetails] = useState(userDetailState)

  const transformData = useCallback(
    (result) => {
      setUserDetails({
        ...userDetails,
        userInfo: result.data,
        loading: false
      })
 
    },
    [userDetails]
  )

  const getUserData = useCallback(async () => {
    try {
      const result = await axios.get('/userdetails')
      transformData(result)
    } catch (error) {
      setUserDetails({
        ...userDetails,
        loading: false
      })
    }
  }, [transformData, userDetails])

  useEffect(() => {
    getUserData()
  }, [])

  return {
    userDetails
  }
}

userProvider:

import React, { useEffect } from 'react'

import { Loading } from 'components'
import UserContext from 'context/UserContext'
import { customHook } from 'hooks/User/customHook'

const UserProvider = () => {
  const { userDetails } = customHook()

  const renderContent = () => {
    if (userDetails.loading) {
      return (
        <div className='loading'>
          <Loading size='large' data-testid='userProfileLoadingId' className='loading-content' />
        </div>
      )
    } else return dashbaordComponent
  }

  const contextValue = {
    userDetail: userDetails.userInfo,
  }

  return (
    <UserContext.Provider value={contextValue}>
      {renderContent()}
    </UserContext.Provider>
  )
}
0 Answers
Related