如何使用酶测试此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 {}
答案 0 :(得分:0)
分隔代码。 给增强器一个文件,给组件另一个文件。
在增强器上,仅导出生成的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。