compose HOC的单元测试
Posted
技术标签:
【中文标题】compose HOC的单元测试【英文标题】:Unit test for compose HOC 【发布时间】:2019-04-16 06:43:18 【问题描述】:如何使用 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
【问题讨论】:
你在测试中使用过dive()
吗?
我试过但没用
可以添加测试代码吗?
添加了测试代码
onClickOutside
是什么?
【参考方案1】:
分离您的代码。 给增强器一个文件,给组件另一个。
在增强器上,仅导出生成的 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
将返回 ReactWrapper
、according to the docs。您可以使用ToggleDropdown.props()
函数take a look at the props。
【讨论】:
我有这个错误:TypeError: Cannot read property 'isReactComponent' of undefined以上是关于compose HOC的单元测试的主要内容,如果未能解决你的问题,请参考以下文章