如何创建React Button组件并修复单元测试返回null的问题

你的测试报错核心原因是组件导出方式和导入方式不匹配，导致测试文件无法正确引入Button组件，渲染结果为null。

问题点梳理：

• Button组件使用的是命名导出：export { Button }
• 测试代码使用的是默认导入：import Button from './Button'

两种导出导入规则不兼容，所以拿到的Button是undefined，shallow渲染后自然没有对应DOM结构，你可以任选以下一种方案修复：

方案1：修改测试文件的导入语句 #

把测试代码里的导入行改成命名导入，匹配组件的导出规则：

// 测试文件修改前
import Button from './Button';
// 测试文件修改后
import { Button } from './Button';

方案2：修改Button组件的导出语句 #

把组件的导出改成默认导出，匹配测试的导入规则：

// Button组件修改前
export { Button };
// Button组件修改后
export default Button;

修改完成后重新执行测试，即可匹配到预期输出结果。

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