Jest/React Testing Library引入第三方库频繁报错，求配置排查

1. react-markdown 报错 SyntaxError: Unexpected token 'export' #

这个错误源于react-markdown使用ES模块语法，但Jest默认仅处理CommonJS模块，需配置让Jest转译该库。
在package.json的Jest配置中更新transformIgnorePatterns，将需要转译的库排除在忽略列表外：

{
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!react-markdown|remark-gfm|remark-parse|remark-rehype|rehype-raw|rehype-stringify)"
    ]
  }
}

同时确保你的.babelrc配置支持ES模块转译：

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

2. react-slick 报错 matchMedia not present, legacy browsers require a polyfill #

Jest运行在Node环境，不存在浏览器的matchMediaAPI，需手动模拟。
在项目中创建src/setupTests.js文件，添加模拟代码：

window.matchMedia = window.matchMedia || function() {
  return {
    matches: false,
    addListener: () => {},
    removeListener: () => {}
  };
};

然后在package.json的Jest配置里指定该初始化文件：

{
  "jest": {
    "setupFilesAfterEnv": ["./src/setupTests.js"]
  }
}

也可使用jest-matchmedia-mock库简化操作：

npm install jest-matchmedia-mock --save-dev

在setupTests.js中导入使用：

import MatchMediaMock from 'jest-matchmedia-mock';

const matchMediaMock = new MatchMediaMock();
beforeAll(() => {
  global.matchMedia = matchMediaMock.matchMedia;
});

3. nanoid 报错 SyntaxError: Cannot use import statement outside a module #

nanoid新版本采用原生ES模块，需让Jest转译它，在transformIgnorePatterns中添加nanoid：

{
  "jest": {
    "transformIgnorePatterns": [
      "/node_modules/(?!react-markdown|nanoid|remark-gfm|remark-parse|remark-rehype|rehype-raw|rehype-stringify)"
    ]
  }
}

整合后的完整配置示例 #

.babelrc #

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

package.json中的Jest配置 #

{
  "jest": {
    "setupFilesAfterEnv": ["./src/setupTests.js"],
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!react-markdown|nanoid|react-slick|slick-carousel|remark-gfm|remark-parse|remark-rehype|rehype-raw|rehype-stringify)"
    ]
  }
}

若项目基于Create React App搭建，无需手动配置.babelrc，直接通过src/setupTests.js添加初始化逻辑，如需调整transformIgnorePatterns，可创建jest.config.js文件覆盖默认配置。

内容的提问来源于stack exchange，提问作者丶 Limeー来夢 丶