运行Jest时出现SyntaxError，寻求Jest配置调整建议

你遇到的这个SyntaxError，大概率是因为Jest默认无法处理CSS文件的导入，另外我们也可以再确认下配置，确保React和ES6语法能被正确转译。下面是具体的解决步骤：

1. 处理CSS文件的导入问题 #

Jest会把所有导入的文件都当作JavaScript来解析，当你在Code.js里导入highlight.js/styles/github.css时，自然会触发语法错误。我们可以通过配置moduleNameMapper，把所有CSS导入映射到一个空的mock模块来避开这个问题：

修改你的package.json，添加Jest配置部分：

{
  "scripts": {
    "test": "jest"
  },
  // ... 保留原有的dependencies、devDependencies和babel配置
  "jest": {
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

然后在项目根目录新建__mocks__/styleMock.js文件，内容如下：

module.exports = {};

这个mock文件会让Jest把所有CSS导入都视为空对象，不会再尝试解析CSS内容。

2. 确认Babel转译配置有效性 #

你的Babel配置已经包含了env和react预设，这已经足够转译React JSX和ES6+语法，而且你也安装了对应的babel-jest依赖，版本和Jest也是兼容的。如果还是存在ES6语法相关的错误，可以尝试添加transform-runtime插件来增强转译能力：

先安装插件依赖：

npm install --save-dev babel-plugin-transform-runtime

然后修改package.json里的Babel配置：

"babel": {
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

3. （可选）为组件渲染测试准备环境 #

如果后续你需要实际渲染组件进行测试（比如生成快照或检查DOM结构），可以安装react-test-renderer来支持React组件的测试渲染：

npm install --save-dev react-test-renderer

修改测试文件示例：

import React from 'react';
import Code from './Code';
import renderer from 'react-test-renderer';

describe('Code', () => {
  it('renders correctly', () => {
    const tree = renderer.create(<Code />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

现在重新运行npm test，应该就能解决之前的SyntaxError问题了。

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