升级office-ui-fabric-react后Jest测试报SyntaxError: Unexpected token export

我之前升级Fabric到6.x版本时也碰到过一模一样的报错，当时折腾了好一会儿才搞定，给你说下问题出在哪以及怎么解决：

为啥会报错？ #

office-ui-fabric-react从6.x版本开始，输出的代码里用了ES模块的语法（比如报错里的export * from...），但Jest默认是不会去转译node_modules目录下的文件的，所以它识别不了这种ES语法，直接抛出语法错误了。

具体修复步骤 #

1. 修改Jest配置，让它转译Fabric相关包 #

找到你的Jest配置文件（一般是jest.config.js，或者在package.json里的jest字段），添加transformIgnorePatterns配置：

module.exports = {
  // 保留你原来的其他配置
  transformIgnorePatterns: [
    'node_modules/(?!office-ui-fabric-react|@uifabric|@microsoft)'
  ]
};

这个正则的意思是：node_modules里除了office-ui-fabric-react、@uifabric、@microsoft开头的包，其他都不转译——反过来就是说，这三类包要交给Jest去转译处理，这样就能识别ES语法了。

2. 确认Babel配置没问题 #

如果你用了Babel，得确保@babel/preset-env配置正确，能处理ES模块转译。比如你的.babelrc可以这么写：

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-react"
  ]
}

这样Babel会把ES模块语法转换成Node.js/Jest能理解的CommonJS格式。

3. 清掉Jest缓存再跑测试 #

Jest会缓存编译后的文件，有时候旧缓存会搞事情，所以跑测试的时候加个--no-cache参数：

npm test -- --no-cache

额外提醒 #

如果这么弄了还是有问题，可以检查下是不是还有其他Fabric相关的依赖包需要加到transformIgnorePatterns里，或者看看你的Jest版本是不是太老了（建议用24及以上版本，对ES模块支持更好）。

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