如何将自定义Jest mock导入多个测试文件实现复用？

方案1：全局配置Mock（推荐，无需每个测试文件重复引入） #

• 首先确认你的Jest配置文件（通常是jest.config.js或jest.config.ts）中已正确配置setupFilesAfterEnv，指向全局初始化脚本，示例配置：

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/config/setup.js'], // 路径需要和你的实际文件位置对应
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

• 打开你配置的config/setup.js文件，直接把mock代码放入即可，所有测试运行前都会自动执行该mock，不需要每个测试文件单独编写：

// config/setup.js
jest.mock(
    `next/image`,
    () =>
        function Image({ src, alt, ...rest }) {
            // eslint-disable-next-line @next/next/no-img-element
            return <img src={src} alt={alt} {...rest} />;
        },
);

注：代码中增加了...rest透传其他属性，避免测试用到width、className等属性时出现异常

方案2：封装为可单独导入的Mock（适合仅需要在部分测试文件Mock的场景） #

• 新建单独的mock文件，比如test/mocks/nextImage.js：

// test/mocks/nextImage.js
module.exports = function Image({ src, alt, ...rest }) {
  // eslint-disable-next-line @next/next/no-img-element
  return <img src={src} alt={alt} {...rest} />
}

• 在需要用到该mock的测试文件顶部直接使用，注意遵守Jest的mock提升规则，不要在工厂函数外先导入mock：

// 你的测试文件，比如xxx.test.jsx
// 直接写在文件最顶部，不需要提前import mock函数
jest.mock('next/image', () => require('../test/mocks/nextImage'))

// 后续再写其他import和测试代码
import { render, screen } from '@testing-library/react'
import YourComponent from './YourComponent'

test('测试组件', () => {
  render(<YourComponent />)
  // 你的测试逻辑
})

常见失效原因排查 #

• 全局配置不生效：检查Jest配置里setupFilesAfterEnv的路径是否正确，修改配置后需要重启测试服务
• 单独导入不生效：不要在jest.mock前先import mock函数，Jest的mock会被提升到所有代码最顶部执行，提前import的变量在mock执行时还未初始化，直接在工厂函数里用require引入即可

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