使用Jest时调用next/font/local遇TypeError: (0, _local.default) is not a function

算力阿峰

2026-7-16

报错原因

Next.js 的 next/font/local 是框架专属的字体优化 API，它依赖 Next.js 构建流程处理字体文件（转码、注入样式等）。但 Jest 运行在 Node.js 环境中，没有加载 Next.js 相关运行时逻辑，导致导入的 localFont 不是预期的函数，而是未正确初始化的导出，调用时就会抛出 TypeError: (0, _local.default) is not a function。

解决方案

方案1：Mock `next/font/local` 模块

直接在 Jest 环境中模拟这个模块的导出，让它返回一个符合预期的函数，生成测试可用的字体对象。

单测试文件局部 Mock

在用到字体的组件测试文件顶部添加：

jest.mock('next/font/local', () => ({
  default: () => ({ className: 'mock-font-class' })
}));

全局 Jest Mock

在项目的 jest.config.ts（或 jest.config.js）中添加 moduleNameMapper 配置：

// jest.config.ts
export default {
  // 其他已有配置...
  moduleNameMapper: {
    'next/font/local': '<rootDir>/__mocks__/next-font-local.ts'
  }
};

在项目根目录创建 __mocks__/next-font-local.ts 文件：

const mockLocalFont = () => ({
  className: 'mock-font-class'
});

export default mockLocalFont;

方案2：封装字体逻辑适配测试环境

因为你开发的是 UI 库，可将字体初始化逻辑封装，根据环境自动切换：

// src/fonts.ts
let myFont: { className: string };

if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'test') {
  const { default: localFont } = await import('next/font/local');
  myFont = localFont({ src: './my-font.woff2' });
} else {
  // 测试/非浏览器环境用模拟值
  myFont = { className: 'fallback-font-class' };
}

export { myFont };