Jest测试React父组件验证子组件渲染时报VariableDeclaration错误如何解决

1 首个报错（Property declarations[0] of VariableDeclaration...）的解决 #

这个是Babel版本冲突导致的编译错误，和组件导出无关：
你当前依赖中同时安装了已废弃的旧版babel-core@6.x和新版@babel/系列预设，二者完全不兼容，执行以下命令修复版本：

npm uninstall babel-core
npm install --save-dev @babel/core@^7.15.0

修复后检查你的Babel配置文件（.babelrc/babel.config.js），确保使用的是@babel/preset-env、@babel/preset-react等7.x版本预设，没有调用旧版preset。 #

2 子组件Mock无效的问题修正 #

不存在Hook编写的组件无法被Mock的情况，你当前的Mock写法不符合ES模块默认导出的规则：
你的子组件是export default导出，jest.mock回调需要返回包含default属性的对象才能匹配默认导入逻辑，修正后的Mock代码：

jest.mock('../link/Link', () => {
  return {
    default: () => <div>Mocked component</div>
  }
});

3 不使用Mock时子组件不渲染的解决 #

子组件中调用了useRouter这个Next.js专属Hook，测试环境默认没有Next路由上下文，会导致子组件渲染中断，所以wrapper.debug()看不到子组件内容，补充对next/router的Mock即可：

// 加在测试文件顶部
jest.mock('next/router', () => ({
  useRouter: () => ({
    pathname: '/', // 可自定义路径测试激活态逻辑
    push: jest.fn(),
    replace: jest.fn()
  })
}));

4 后续排查步骤 #

• 执行测试时添加--verbose参数，查看完整报错堆栈，确认错误来源是编译阶段还是组件运行阶段
• 临时注释子组件中Hook相关代码，测试基础渲染逻辑是否正常，缩小问题范围
• 打印导入的Link组件内容，确认路径正确、Mock生效

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