React Jest测试中调用render()渲染Characters组件报错问题

常见原因及修复方案 #

1. 测试文件扩展名错误 #

如果你的测试文件是.ts后缀，TypeScript会把<Characters/>解析为类型断言而非JSX元素。将测试文件的扩展名改为.tsx即可解决这个问题。

2. 组件导入方式不匹配 #

检查Characters组件的导出方式：

• 如果组件是默认导出：

  // characters.tsx
  export default function Characters() {
    // 组件内容
  }
  

  导入时保持import Characters from '../../pages/charaters/characters';即可。

• 如果组件是命名导出：

  // characters.tsx
  export function Characters() {
    // 组件内容
  }
  

  导入时需要改为：

  import { Characters } from '../../pages/charaters/characters';
  

3. 组件类型定义问题 #

确保组件被正确定义为React组件类型，比如使用React.FC或者普通函数组件：

import React from 'react';

const Characters: React.FC = () => {
  return <div>Characters List</div>;
};

export default Characters;

修复后的测试代码示例 #

import { render, screen } from '@testing-library/react';
import Characters from '../../pages/charaters/characters';

describe('<Characters/>', () => {
  test("Renders <Characters/>", () => {
    render(<Characters/>);
    // 可选：添加断言验证组件渲染结果
    expect(screen.getByText(/characters/i)).toBeInTheDocument();
  });
});

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