reactjs - compose HOC的单元测试
问题描述
如何用 Enzyme 测试这种 HOC?我试过很浅,但它只覆盖了 40% 的组件。
export default compose(
withState('showDropdown', 'handleDropdown', false),
withHandlers({
handleClickOutside: props => () => {
props.handleDropdown(false)
},
menuItemClick: props => () => {
props.handleDropdown(false)
},
}),
onClickOutside,
)(AccountDropdown)
这是我的测试代码
const props = {
showDropdown: false,
handleDropdown: jest.fn(),
menuItemClick: jest.fn(),
onLogout: jest.fn(),
user: {},
}
const output = mount(<AccountDropdown
showDropdown={props.showDropdown}
handleDropdown={props.handleDropdown}
menuItemClick={props.menuItemClick}
onLogout={props.onLogout}
user={props.user}
/>)
console.log('output', output)
const TogleDropdown = output.find('TogleDropdown')
console.log('TogleDropdown', TogleDropdown)
expect(shallowToJson(output)).toMatchSnapshot()
我也无法测试事件,因为 console.log 输出:
output ReactWrapper {}
解决方案
分开你的代码。给增强器一个文件,给组件另一个。
在增强器上,仅导出生成的 HOC:
export default compose(
withState('showDropdown', 'handleDropdown', false),
withHandlers({
handleClickOutside: props => () => {
props.handleDropdown(false)
},
menuItemClick: props => () => {
props.handleDropdown(false)
},
}),
onClickOutside,
)
在另一个文件上,仅导出AccountDropdown
(不换行)。然后,在其他地方,导出它们的“组合”:
import enhancer from './enhancer.js';
import AccountDropdown from './AccountDropdown.jsx';
export default enhancer(AccountDropdown);
现在,在测试中,导入每个单独的文件,在那里“增强”组件并正确找到组件:
import enhancer from './enhancer.js';
import AccountDropdown from './AccountDropdown.jsx';
const Component = enhancer(AccountDropdown);
const props = {
showDropdown: false,
handleDropdown: jest.fn(),
menuItemClick: jest.fn(),
onLogout: jest.fn(),
user: {},
}
const output = mount(<Component {...props} />)
const ToggleDropdown = output.find(AccountDropdown) // no quotes
您ToggleDropdown
将拥有供您测试的组件。例子:
expect(handleDropdown).to.have.property('callCount', 0);
请注意,根据文档mount
,将返回 a 。您可以使用该功能查看道具。ReactWrapper
ToggleDropdown.props()
推荐阅读
- python - Python 2 将数据帧合并到一个表中
- ruby-on-rails - 如何在rails公共目录的子目录中使用css设置静态页面
- matlab - 如何纠正网格搜索?
- python - 计算两个 CDF 的最大逐点距离
- c++ - 提升与 Arduino 的 ASIO 串行通信:错误高于 9600 bps
- dictionary - 单击以在 d3.js 地图中缩放和比例尺
- angular - “...已被 CORS 政策阻止:没有‘Access-Control-Allow-Origin’”
- java - 图像捕获屏幕的特定部分
- python - Astropy ICRS 到 Galactocentric 转换 Numpy AttributeError
- php - 从记录集中获取下一行和上一行