有没有办法解构传递给函数 onClick 的数据属性？答案

【问题标题】：Is there a way to destructure data-attributes passed to a function onClick in jest?有没有办法解构传递给函数 onClick 的数据属性？
【发布时间】：2020-04-23 06:52:12
【问题描述】：

handleClick() 是我要测试的功能：

this.state = {
  expanded: {},
}     
handleClick = (e) => {
const { dataset } = e.target

this.setState((prevState) => ({
  expanded: {
    ...prevState.expanded,
    [dataset.id]: !prevState.expanded[dataset.id],
  },
}))}

handleClick 函数和 dataId 作为 prop 传递给 Icon 子组件：

<Icon
          icon={
            this.state.expanded[this.props.id] === false ? "plus" : "minus"
          }
          size="sm"
          dataId={this.props.id}
          onClick={this.handleClick}
        />

点击图标时调用handleClick()函数：

const Icon = props => {
      const { icon, size, dataId = null, onClick = null } = props
      return (
               <i
                 className={`fa fa-${icon} fa-${size}`}
                 data-id={dataId}
                 onClick={onClick}
               />
             )
     }

这是我为 handleClick() 开玩笑的测试用例：

it("should update state when handleClick is invoked", () => {
      const mockExpanded = {}
      mockExpanded[initialProps.id] = false
      wrapper.setState({ expanded: mockExpanded })

      const mockEvent = {
       target: wrapper.find("Icon").dive().find("i").debug(), //need to pass target value as 
       an object
      }
      wrapper.instance().handleClick(mockEvent)
      expect(wrapper.state().expanded[initialProps.id]).toBe(true)   })

即使在将 mockEvent 作为目标对象传递给 handleClick(e) 之后，测试用例似乎也无法解构 data-id 属性：

TypeError: Cannot read property 'id' of undefined

  27 |       expanded: {
  28 |         ...prevState.expanded,
> 29 |         [dataset.id]: !prevState.expanded[dataset.id],
     |                  ^
  30 |       },
  31 |     }))
  32 |   }

请建议在开玩笑的测试用例中解构数据集的方法或测试 handleClick(e) 方法的正确方法。

【问题讨论】：

测试中是否存在mockEvent.target.dataset.id？这不是解构，它只是访问对象的属性。
@Drew Reese 感谢您的指出。它解决了问题。

标签： javascript reactjs testing jestjs enzyme

【解决方案1】：

it("should update state when handleClick is invoked", () => {
const mockExpanded = {}
mockExpanded[initialProps.id] = false
wrapper.setState({ expanded: mockExpanded })

const mockEvent = {
  target: { dataset: { id: initialProps.id } },
}
wrapper.instance().handleClick(mockEvent)

expect(wrapper.state().expanded[initialProps.id]).toBe(true)

})

【讨论】：