时间戳

首页 > 解决方案 > e.target 在反应组件事件处理程序的开玩笑单元测试中找不到，尽管将第二个参数传递给酶的 .simulate()

reactjs - e.target 在反应组件事件处理程序的开玩笑单元测试中找不到，尽管将第二个参数传递给酶的 .simulate()

问题描述

所以我有一个选择下拉列表，用户可以在其中从省份列表中进行选择。 

                    <select
                        className="province-select"
                        onChange={this.regionSelected}
                    >
                        <option>
                            Ontario
                        </option>
                        <option>
                            Quebec
                        </option>
                    </select>

在我的单元测试中，我想触发 on change 事件并检查 this.regionSelected 是否按预期调用

const wrapperSuccess = shallow(<RegionSelector {...validData} />);

        wrapperSuccess.find(".province-select").simulate('change', { target: { value: 'Ontario' } });

我的 RegionSelector 组件在实际环境中运行和工作很有趣。但是，当我运行上面的单元测试时，出现以下错误：

无法读取未定义的属性“目标”

setCurrentRegion(e.target.value)

setCurrentRegion 是在更改处理函数 this.regionSelected 中调用 e.target.value 的第一行代码。我检查了酶的文档和其他几个堆栈溢出答案，他们都说要传入第二个事件对象。但我是！仍然没有找到 e.target 。我错过了什么？谢谢

标签： reactjsjestjs

解决方案

好的！弄清楚了。原因似乎是因为 eventHandler 是组件本身的方法。如果是通过 props 传入的 eventHandler 就好了。但是出于某种原因，使用 jest 的 shallow()，即使将第二个参数传递给模拟 () 函数，eventHandler 也不会收到它。我通过监视组件本身的原型来解决它，这似乎有效

推荐阅读