Question

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

我需要为此编写一个使用笑话和酶的测试。我正在将以下代码与模拟回调一起使用，但无法看到组件传递的参数。

我在这里做什么错了？

   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
  })
})

Answer 1

您没有正确访问道具。

反应功能组件仅采用一个参数，即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>

如何在Jest中检查将哪些参数传递给模型回调函数？

1 个答案: