JEST测试Next.js Image组件时提示缺少src属性的问题求助

问题分析 #

在Jest测试环境中，Next.js的Image组件无法像在Next.js服务中那样处理静态资源导入，导致即使正确传递src属性，测试时仍会报错。另外你的测试代码存在拼写错误：@testing-libraty/jest-dom应为@testing-library/jest-dom，这可能影响测试环境正常运行。

解决方案 #

方案1：Mock Next.js Image组件 #

创建mock版本的Image组件，替代Next.js原生组件进行测试：

1. 在项目根目录创建__mocks__/next/image.js文件：

import React from 'react';

const MockImage = ({ src, alt, ...props }) => {
  // 用原生img组件替代Next.js Image，规避测试环境的图片处理逻辑
  return <img src={src} alt={alt} {...props} />;
};

export default MockImage;

2. 在测试文件顶部添加mock声明，同时修正拼写错误：

import WhiteLabel from '@components/About/WhiteLabel';
import {render} from '@testing-library/react';
import '@testing-library/jest-dom';
import {whiteLabelList} from '@utils'

// Mock Next.js Image组件
jest.mock('next/image');

describe("whiteLabel component",() => {
  it('should return if the list topics is in the document',()=>{
    const { getByText } = render(<WhiteLabel />);

    whiteLabelList.forEach(object => {
      expect(getByText(object.text)).toBeInTheDocument();
    });
  });
})

方案2：配置Jest处理静态资源导入 #

通过Jest的moduleNameMapper将图片资源映射为占位符，避免解析错误：

1. 在jest.config.js中添加静态资源映射规则：

module.exports = {
  // 其他配置项...
  moduleNameMapper: {
    // 匹配所有图片格式，映射到mock文件
    '^.+\\.(svg|png|jpg|jpeg|gif|webp)$': '<rootDir>/__mocks__/fileMock.js',
  },
};

2. 创建__mocks__/fileMock.js文件：

// 用字符串作为图片导入的返回值
module.exports = 'mock-image-path';

这样Jest会把所有图片导入解析为字符串mock-image-path，Image组件就能拿到有效的src值，不会触发报错。

额外注意事项 #

• 确认组件中图片资源的导入路径正确（比如../../public/images/imageSrc.svg是否对应真实文件位置）。
• 测试环境不需要Next.js的图片优化逻辑，mock组件是更轻量的解决方案。

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