单元测试 React 的点击外部组件。

8 浏览
0 Comments

单元测试 React 的点击外部组件。

使用来自这个答案的代码来解决组件外部点击问题：

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
}
setWrapperRef(node) {
    this.wrapperRef = node;
}
handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
        this.props.actions.something() // 例如，关闭模态框
    }
}

我无法弄清楚如何单元测试不快乐的路径，以便不运行警报，我目前的进展：

it('处理组件外部的点击', () => {
  props = {
    actions: {
      something: jest.fn(),
    }
  }
  const wrapper = mount(
    ,
  )
  expect(props.actions.something.mock.calls.length).toBe(0)
  // 快乐路径应该触发模拟
  wrapper.instance().handleClick({
    target: 'outside',
  })
  expect(props.actions.something.mock.calls.length).toBe(1)  //true
  // 不快乐的路径不应该在这里触发模拟 ???
  expect(props.actions.something.mock.calls.length).toBe(1)
})

我尝试过：

  • 通过wrapper.html()发送
  • 通过.find一个节点并发送（不模拟event.target）
  • 通过.simulate在内部元素上模拟click（不触发事件监听器）

我确定我错过了一些小东西，但我找不到任何示例。

0