Jest测试React组件报错Cannot read property 'searchForGames' of undefined如何处理

报错根因 #

TypeError: Cannot read property 'searchForGames' of undefined报错的核心是jest.mock模拟的模块导出结构和真实services模块的导出结构不匹配：
真实services模块是命名导出igdbService实例和Game类型，你写的jest.mock直接返回了Service类实例，没有按命名导出的结构返回，导致组件中导入的igdbService为undefined，调用方法自然失败。

修复后的search.test.tsx代码 #

import {Search} from "../src/Search"
import * as React from "react";
import { shallow } from 'enzyme';
import { NavBar, GameCard } from "../src/widgets";

jest.mock("../src/services", () => {
    class Service {
        // 修正参数类型写法：参数名在前，类型在后
        searchForGames(searchString: string) {
            return Promise.resolve(
                [
                    {
                        id:143755,
                        cover: {
                            id:1311803,
                            url: '//images.igdb.com/igdb/image/upload/t_thumb/co2tp7.jpg'
                        },
                        name: "Terrorist Killer",
                    }
                ]
            )

        }
        getGames() {
            return Promise.resolve();
        }
    }
    // 匹配真实模块的命名导出结构
    return {
      igdbService: new Service(),
      Game: {}
    };
})

// 改用async写法更清晰，不需要setTimeout
test("Search draws correctly", async () => {
    const wrapper = shallow (<Search match={{params: {searchString: "Terrorist"} }}/>)
    // 等待异步请求完成
    await Promise.resolve()
    // 更新组件渲染
    wrapper.update()
    expect(
        wrapper.containsAllMatchingElements([
            <div>
                <NavBar.Link to="/games/143755">
                    <GameCard
                        name="Terrorist Killer"
                        // 匹配组件内的url替换逻辑，把thumb换成cover_big
                        url="//images.igdb.com/igdb/image/upload/t_cover_big/co2tp7.jpg"
                    />
                </NavBar.Link>
            </div>
        ])
    ).toEqual(true);
})

其他调整说明 #

• 组件逻辑中会将封面url的thumb字段替换为cover_big，所以断言中的url需要和替换后的结果一致，否则会出现断言失败
• 原测试代码中方法参数的类型写法错误，已调整为正确的参数名: 类型格式
• 用async + 等待微任务 + 手动更新组件的写法替代setTimeout，测试逻辑更稳定，不会出现超时导致的用例失败

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