Jest mock模块导入异常：fetchNewsData调用返回undefined排查

我正在排查Jest无法从__mocks__/http.js导入函数的问题。catchAnalysis.js中导入并调用fetchNewsData可正常运行，但在catchAnalysis.test.js中使用jest.mock('./http')导入fetchNewsData后，调用该函数返回undefined。

相关代码 #

catchAnalysis.js #

import { fetchNewsData } from './http'

async function catchAnalysis(params) {
    console.log("::: Form Submitted :::")
    fetchNewsData(params)
        .then(response => /* Blablabla */)  
        .catch(error => console.log('error', error));
}

catchAnalysis.test.js #

jest.mock('./http')
import { fetchNewsData } from './http'

test("Mock API works", () =>{
    let testing = fetchNewsData()
    console.log(`fetchNewsData value is ${testing}`)
    /* Blablabla */     
})

mocks/http.js（真实文件为简单fetch API调用） #

function fetchNewsData(){
    console.log("::: MOCK API :::")
    let responseData = {
        "agreement": "DISAGREEMENT",
        "confidence": "86",
        "irony": "NONIRONIC",
        "model": "general_en",
        "score_tag": "P",
        "status": {
            "code": "0",
            "msg": "OK",
            "credits": "3",
            "remaining_credits": "19849"
        },
        "subjectivity": "SUBJECTIVE"
    }
    console.log(`response Text is ${response.text()}`)
    return Promise.resolve(response)
}

export {
    fetchNewsData
}

问题原因及修复 #

你的jest.mock用法本身没问题，核心问题出在__mocks__/http.js的代码错误：

1. 未定义response变量：代码里声明了responseData，但后续直接使用未定义的response变量，调用response.text()会抛出ReferenceError，且Promise.resolve(response)会返回一个resolve值为undefined的Promise。
2. 模拟的response结构不符合预期：真实的fetch返回的response对象包含text()等异步方法，mock里需要对应模拟。

修复后的__mocks__/http.js：

function fetchNewsData(){
    console.log("::: MOCK API :::")
    const responseData = {
        "agreement": "DISAGREEMENT",
        "confidence": "86",
        "irony": "NONIRONIC",
        "model": "general_en",
        "score_tag": "P",
        "status": {
            "code": "0",
            "msg": "OK",
            "credits": "3",
            "remaining_credits": "19849"
        },
        "subjectivity": "SUBJECTIVE"
    }
    // 模拟fetch返回的response对象，包含text()异步方法
    const mockResponse = {
        text: () => Promise.resolve(JSON.stringify(responseData))
    }
    console.log(`response Text is ${JSON.stringify(responseData)}`)
    return Promise.resolve(mockResponse)
}

export { fetchNewsData }

调试步骤 #

1. 查看测试控制台输出：运行测试时检查是否有ReferenceError之类的语法错误，这是最直接的问题线索。
2. 验证mock路径正确性：确保__mocks__文件夹和真实http.js在同一目录下，jest.mock('./http')的路径与业务文件中的导入路径一致。
3. 异步函数测试规范：由于fetchNewsData是异步函数，测试中需用async/await或.then()处理Promise，避免在Promise未resolve时就输出结果：

   test("Mock API works", async () =>{
       let testing = await fetchNewsData()
       console.log(`fetchNewsData value is`, testing)
       // 断言逻辑
   })
   

内容的提问来源于stack exchange，提问作者Matt Rauscher