如何检查哪些参数被传递给一个模型回调函数？答案

【问题标题】：How to check which arguments are being passed to a mockup callback function in jest?如何检查哪些参数被传递给一个模型回调函数？
【发布时间】：2018-11-28 23:05:59
【问题描述】：

我有一个简单的 React 组件，它接收一个属性 type 和一个回调 onClick。当用户点击组件回调时执行传递属性type。

我需要用 jest 和酵素来写一个测试。我正在使用带有模拟回调的以下代码，但我看不到组件传入的参数。

我在这里做错了什么？

   const Component = ({type, onClick}) => <div onClick={() => onClick(type)}></div>


describe('<Component />', () => {
  it('should call callback on click getting passed value', () => {
    const mockCallback = jest.fn()
    const wrapper = shallow(<Component type="xxx" onClick={mockCallback} />)
    wrapper.simulate('click')
    expect(mockCallback).toHaveBeenCalled() // this is ok
    expect(mockCallback).toBeCalledWith("xxx")// ISSUE HERE: always false
  })
})

【问题讨论】：

不确定这是否与问题有关或只是一个错字，但您的组件定义缺少花括号：const Component = ({ type, onClick }) => <div onClick={() => onClick(type)}></div>（也是 const，而不是续)
有了这个改变，我已经尝试运行你的代码，它工作得很好，所有测试都通过了

标签： javascript reactjs mocking jestjs

【解决方案1】：

您没有正确访问道具。

React 函数组件只需要一个参数，它是props。

改变这个

const Component = (type, onClick) => <div onClick={() => onClick(type)}></div>

到

const Component = (props) => <div onClick={() => props.onClick(props.type)}></div>

// or destructure the props within the brackets

const Component = ({type, onClick}) => <div onClick={() => onClick(type)}></div>

【讨论】：

谢谢，但我仍然有玩笑的问题
@Radex 就像我说的，我试过运行你的代码，它只是找到。问题一定出在其他地方