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的单元测试的主要内容,如果未能解决你的问题,请参考以下文章

Android Compose 单元测试实践

Android Compose 单元测试实践

Android Compose 单元测试

Android Compose 单元测试

hyperf composer执行单元测试超时处理

hyperf composer执行单元测试超时处理