I'm trying to mock an axios get function but I'm getting TypeError: moduleName.startsWith is not a function when mocking "axios" What would be the right way to mock it?

Error:

 FAIL  src/tests/Sample.test.jsx
  ● Test suite failed to run

    TypeError: moduleName.startsWith is not a function

       5 | import { backendUrl } from "../helper/constants"
       6 | describe("test useEffect and axios", () => {
    >  7 |     const mockGet = jest.mock(axios.get)

Sample.test.jsx

import { mount } from "enzyme"
import { screen, render, act } from "@testing-library/react"
import Sample from "../pages/Sample"
import axios from "axios"
import { backendUrl } from "../helper/constants"
describe("test useEffect and axios", () => {
    const mockGet = jest.mock(axios.get) // THROWS ERROR HERE

    let wrapper
    it("should call axios", async () => {
        await act(async () => {
            mockGet.mockImplementationOnce(() => Promise.resolve({}))
            wrapper = mount(<Sample />)
        })
        wrapper.update()
        await expect(mockGet).toHaveBeenCalledWith(backendUrl)
    })
})

Sample.jsx

import axios from "axios"
import { useState, useEffect } from "react"
import { backendUrl } from "../helper/constants"

const Sample = () =>{
    const [pets, setPets] = useState([])
    useEffect(() => axios.get(backendUrl)
    .then(({data}) =>setPets(data.entries))
    .catch((err)=>console.log(err)), [])
    return (
        <>
        <p>I h8 all of you</p>
            {pets.map((e, i) =><h2 key={i}>{e.Link}</h2>)}
        </>
    )
}

export default Sample

I'm trying to mock an axios get function but I'm getting TypeError: moduleName.startsWith is not a function when mocking "axios" What would be the right way to mock it?

Error:

 FAIL  src/tests/Sample.test.jsx
  ● Test suite failed to run

    TypeError: moduleName.startsWith is not a function

       5 | import { backendUrl } from "../helper/constants"
       6 | describe("test useEffect and axios", () => {
    >  7 |     const mockGet = jest.mock(axios.get)

Sample.test.jsx

import { mount } from "enzyme"
import { screen, render, act } from "@testing-library/react"
import Sample from "../pages/Sample"
import axios from "axios"
import { backendUrl } from "../helper/constants"
describe("test useEffect and axios", () => {
    const mockGet = jest.mock(axios.get) // THROWS ERROR HERE

    let wrapper
    it("should call axios", async () => {
        await act(async () => {
            mockGet.mockImplementationOnce(() => Promise.resolve({}))
            wrapper = mount(<Sample />)
        })
        wrapper.update()
        await expect(mockGet).toHaveBeenCalledWith(backendUrl)
    })
})

Sample.jsx

import axios from "axios"
import { useState, useEffect } from "react"
import { backendUrl } from "../helper/constants"

const Sample = () =>{
    const [pets, setPets] = useState([])
    useEffect(() => axios.get(backendUrl)
    .then(({data}) =>setPets(data.entries))
    .catch((err)=>console.log(err)), [])
    return (
        <>
        <p>I h8 all of you</p>
            {pets.map((e, i) =><h2 key={i}>{e.Link}</h2>)}
        </>
    )
}

export default Sample

• javascript
• reactjs
• axios
• jestjs
• enzyme

1 Answer 1

You have to use the right syntax like this jest.mock('axios') so in your case:

jest.mock('axios')

describe("test useEffect and axios", () => {
    const mockGet = jest.fn()

    let wrapper
    it("should call axios", async () => {
        await act(async () => {
            mockGet.mockImplementationOnce(() => Promise.resolve({}))
            wrapper = mount(<Sample />)
        })
        wrapper.update()
        await expect(mockGet).toHaveBeenCalledWith(backendUrl)
    })
})