React子组件单元测试时discount为null或undefined的错误原因是什么

直接导致discount报错的原因 #

• 你导入的getSeasonsalCode函数在测试环境运行时返回了null或undefined：该函数大概率依赖运行时上下文（比如当前时间、环境变量、后端接口返回值），测试环境没有对应上下文配置，调用后返回空值，渲染到<span>里就触发类型错误。
• 存在拼写错误的可能性：函数名getSeasonsalCode疑似拼写错误，正确拼写应为getSeasonalCode，如果实际导出的函数名是正确拼写的版本，你导入的就是undefined，调用后自然返回空。
• 也有可能是./DiscountCodes.js的导入路径错误，导致getSeasonsalCode本身就是undefined，调用报错。

你测试代码中存在的其他错误（虽然和当前discount报错无关，但会导致后续测试不通过） #

• 给Rating传setStarCount属性时加了括号：setStarCount={rf_instance.setStarCount()} 等价于直接执行该函数，把返回值undefined传给子组件，而不是传递回调函数本身，需要去掉括号改成setStarCount={rf_instance.setStarCount}。
• 断言的state键名错误：你的Product组件里state存储评分的键名是rating，但你断言用了rf_wrapper.state("starcount")，永远取不到正确值，需要改成rf_wrapper.state("rating")。

修复方法 #

1. 在测试文件中mockgetSeasonsalCode依赖，强制它返回固定测试值，比如使用Jest的话在测试代码顶部添加：

jest.mock("./DiscountCodes.js", () => ({
  getSeasonsalCode: () => "TEST_DISCOUNT_20"
}))

2. 核对getSeasonsalCode的函数名拼写、导入路径是否和DiscountCodes.js的导出一致。
3. 修复上文提到的两处测试代码错误。

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