Как проверить, какие аргументы передаются в функцию обратного вызова макета в Jest?

Question

У меня есть простой компонент 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
  })
})

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>