如何为CSV文件创建Jest转换器，解决React组件测试报错问题？

问题根源 #

你的Jest配置未添加CSV文件的转换规则，Jest默认无法解析CSV格式，因此抛出意外token错误。

方案一：使用现成的CSV转换器包 #

1. 安装转换器依赖

npm install jest-transform-csv --save-dev
# 或用yarn
yarn add jest-transform-csv --dev

2. 修改jest.config.js，新增transform字段配置CSV转换规则：

module.exports = {
  moduleNameMapper: {
    '^.*\\.scss$': 'identity-obj-proxy',
    '^.+\\.svg$': 'jest-svg-transformer',
    '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
    'd3-zoom': '<rootDir>/node_modules/d3-zoom/dist/d3-zoom.min.js',
    'd3-dispatch': '<rootDir>/node_modules/d3-dispatch/dist/d3-dispatch.min.js',
    'd3-drag': '<rootDir>/node_modules/d3-drag/dist/d3-drag.min.js',
    'd3-selection': '<rootDir>/node_modules/d3-selection/dist/d3-selection.min.js',
    'd3-transition': '<rootDir>/node_modules/d3-transition/dist/d3-transition.min.js',
    'd3-timer': '<rootDir>/node_modules/d3-timer/dist/d3-timer.min.js',
    'd3-ease': '<rootDir>/node_modules/d3-ease/dist/d3-ease.min.js',
  },
  testEnvironment: 'jsdom',
  // 添加CSV转换规则
  transform: {
    '^.+\\.csv$': 'jest-transform-csv',
    // 确保JS/JSX文件被Babel处理（若项目未配置过需添加）
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
};

方案二：自定义CSV转换器 #

若不想额外安装包，可自行编写简单转换器：

1. 在项目根目录创建jest-csv-transformer.js文件：

module.exports = {
  process(content) {
    // 将CSV内容转为字符串导出，测试时可按需解析
    return `module.exports = ${JSON.stringify(content.toString())};`;
  },
};

2. 修改jest.config.js的transform字段：

module.exports = {
  moduleNameMapper: {
    // 保留原有moduleNameMapper配置
    '^.*\\.scss$': 'identity-obj-proxy',
    '^.+\\.svg$': 'jest-svg-transformer',
    '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js',
    'd3-zoom': '<rootDir>/node_modules/d3-zoom/dist/d3-zoom.min.js',
    'd3-dispatch': '<rootDir>/node_modules/d3-dispatch/dist/d3-dispatch.min.js',
    'd3-drag': '<rootDir>/node_modules/d3-drag/dist/d3-drag.min.js',
    'd3-selection': '<rootDir>/node_modules/d3-selection/dist/d3-selection.min.js',
    'd3-transition': '<rootDir>/node_modules/d3-transition/dist/d3-transition.min.js',
    'd3-timer': '<rootDir>/node_modules/d3-timer/dist/d3-timer.min.js',
    'd3-ease': '<rootDir>/node_modules/d3-ease/dist/d3-ease.min.js',
  },
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.csv$': '<rootDir>/jest-csv-transformer.js',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
};

额外检查 #

若配置后仍报错，需确认：

• 项目是否安装了babel-jest和@babel/core，未安装则执行：npm install babel-jest @babel/core --save-dev
• Babel配置文件（.babelrc或babel.config.js）是否正确添加了React预设（如@babel/preset-react）

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