Как имитировать событие щелчка на элементе в React с помощью jest, react-testing-library

Question

Мой компонент отображает следующее

{list.options && list.options.length > 0 ? (
<div
    data-testId="MyAlertText" onClick={onAddText}>
    Add Text
</div>
) : null}

И в моих тестах я делаю следующее

it('Add Text link should render', () => {
    const { container, getByTestId} = render(<MyComp />);

    const link = getByTestId('MyAlertText');
    expect(link).toBeInTheDocument();
})

Он работает успешно

Но когда я пытаюсь запустить и смоделировать onClick это не удается.

it('Add Text link should call method', () => {
    const { container, getByTestId} = render(<MyComp />);

    const link = getByTestId('MyAlertText');
    expect(link).toBeInTheDocument();

    fireEvent.click(link );
    expect(jest.fn()).toHaveBeenCalled();
})

Я пробовал издеваться над функцией, используя jest mock. Что я сделал не так?

Answer 1

Вы можете использовать shallow в jest для разрешения вашего дела.

it('Add Text link should render', async () => {
  const wrapper = shallow(<MyComp />);
  const spy = jest.spyOn(wrapper.instance(), 'onAddText');
  wrapper.find('#MyAlertText).simulate('click');
  await wrapper.update();
  expect(spy).toHaveBeenCalled();
});

Answer 2

Как правило, вам не стоит беспокоиться о методах тестирования внутри вашего компонента. Скорее, вы должны протестировать побочные эффекты этих методов.

Конечно, будет вызываться onAddText (или любые другие onAddText ссылки), но что на самом деле делает onAddText? Проверьте этот эффект.

Answer 3

link.simulate ('click') - надо на задание!