Next.js13中Jest渲染TSX组件时TS2749与未使用导入错误排查

核心问题：你的page.tsx导出的是JSX元素实例，而非可复用的组件函数 #

Next.js 13 App Router要求page.tsx默认导出一个React组件函数，但你的导入类型显示为JSX.Element，说明你的page.tsx代码大概率是直接导出了JSX内容，而非函数，比如：

// 错误写法：直接导出JSX元素
export default <div>Properties页面内容</div>;

这种情况下，你导入的Properties是已经渲染好的元素实例，不是可以用<Properties/>语法调用的组件函数。

报错解析 #

• ts(2749)错误：<Properties/>是JSX语法，要求左侧是组件（函数/类），但你传入的是一个JSX元素值，TypeScript误以为你把值当作类型使用。
• ts(6133)错误：JSX标签<Properties/>会被编译为React.createElement(Properties)，但因为Properties不是函数，TypeScript无法识别你实际使用了这个导入变量，所以提示“未被读取”。

解决步骤 #

1. 规范page.tsx的导出（推荐）
   把page.tsx改成导出组件函数的形式，这也是Next.js 13的官方要求：

   // ../src/app/[locale]/properties/page.tsx
   export default function Properties() {
     return <div>Properties页面内容</div>;
   }
   

   改完后，你的测试里<Properties/>语法就能正常工作，导入也会被正确识别。

2. 临时兼容方案（不推荐）
   如果暂时无法修改page文件，可以直接把导入的JSX元素传入render，不用JSX标签：

   render(Properties); // 直接传入元素实例，而非使用组件标签
   

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