组成HOC的单元测试

时间:2018-11-13 12:20:43

标签: reactjs recompose

如何使用酶测试此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 {}

1 个答案:

答案 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将返回ReactWrapperaccording to the docs。您可以使用ToggleDropdown.props()函数来take a look at the props