preact-testing-library render渲染JSX返回undefined问题排查

渲染结果出现<undefined initialcount="5"></undefined>，是两处代码、配置错误共同导致的：

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

Counter组件使用命名导出：

export function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);
  const increment = () => setCount(count + 1);

  return (
    <div>
      Current value: {count}
      <button onClick={increment}>Increment</button>
    </div>
  );
}

但测试文件中用了默认导入语法，这时候导入的Counter变量实际值为undefined：

// 错误写法：默认导入无法匹配命名导出的组件，得到undefined
import Counter from './Dummy.jsx';

JSX编译阶段遇到绑定值为undefined的组件标签，就会直接生成<undefined>标签结构，这是控制台输出异常标签的核心原因。

2. Babel JSX编译配置冲突 #

现有babel配置存在重复规则冲突：

• 你同时配置了@babel/react预设，以及自定义pragma的@babel/plugin-transform-react-jsx插件。@babel/react预设默认将JSX编译为React.createElement调用，本来可以配合jest配置里react -> preact/compat的映射规则正常工作；
• 手动添加的JSX转换插件会强制把JSX编译为h()调用，和@testing-library/preact内部依赖preact/compat的渲染逻辑不兼容，会导致组件渲染时的实例识别异常，放大导入错误的表现。

按以下步骤调整即可解决问题：

• 修正测试文件的组件导入语法，使用和命名导出匹配的导入方式：

// 修正后：命名导入匹配组件的命名导出
import { Counter } from './Dummy.jsx';

• 精简babel配置，移除重复的@babel/plugin-transform-react-jsx插件，避免和@babel/react预设的JSX编译规则冲突。修正后的babel配置如下：

const testingConfig = {
  plugins: [
    '@babel/plugin-proposal-unicode-property-regex',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
  ],
  presets: [
    '@babel/react',
    '@babel/preset-env'
  ],
};

如果项目需要统一使用preact原生的h函数编译JSX，可以删掉@babel/react预设，只保留自定义pragma的JSX转换插件即可，不要两种规则同时存在。

调整完成后重新执行测试，render函数会正常渲染Counter组件的DOM结构，文本断言可以正常通过。

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