如何修复Jest遇到意外令牌错误（NextJS+TypeScript+styled-components）

方案1：通过Mock静态资源让Jest解析 #

在Jest配置文件（jest.config.js 或 package.json 的 jest 字段）中添加 moduleNameMapper 配置，对图片类文件做Mock：

module.exports = {
  // 保留原有配置
  moduleNameMapper: {
    '\\.(png|jpg|jpeg|gif|svg)$': '<rootDir>/__mocks__/fileMock.js',
    // 若需处理样式文件，补充：
    '\\.(css|scss|sass)$': 'identity-obj-proxy'
  },
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest',
  },
}

在项目根目录创建 __mocks__/fileMock.js 文件，写入：

module.exports = 'test-file-stub';

该Mock会将所有导入的图片替换为字符串占位符，让Jest正常解析。

方案2：使用jest-transform-stub处理静态资源 #

安装依赖包：

npm install jest-transform-stub --save-dev
# 或 yarn
yarn add jest-transform-stub --dev

修改Jest配置的 transform 字段：

module.exports = {
  // 保留原有配置
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest',
    '\\.(png|jpg|jpeg|gif|svg)$': 'jest-transform-stub',
  },
}

额外适配Next.js相关组件 #

若项目使用 next/image，需Mock该组件避免测试报错：
在 __mocks__/next/image.js 中写入：

module.exports = function Image(props) {
  return <img {...props} />;
};

同时确保Babel配置（babel.config.js）正确处理TypeScript与styled-components：

module.exports = {
  presets: [
    'next/babel',
    '@babel/preset-typescript',
  ],
  plugins: ['babel-plugin-styled-components'],
};

完成配置后重新运行测试即可解决PNG、SVG解析错误。

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