Как сделать тестирование кликов в React?

Question

[Fannasankh]

Есть реакт приложение которое грубо говоря состоит из основного statefull компонента и вложенных в него stateless компонентов. Во вложенных компонентах есть обработка кликов, которая вызывает переданные через props методы из основного компонента. Как мне протестировать клик и то, что после клика рендерится новый результат в определенное поле?
Просто рендеринг результата при старте приложения я сделал, работает.
А вот клики не получается эмулировать.

Делаю примерно так

const component = mount();
const buttons = component.find(Button);
buttons.at(0).simulate("click");
component.update();
const text = component.find(TextComponent);
expect(text.text()).toEqual("-");

По идее там "-" при инициализации, а при клике должен измениться, а ничего не меняется

Answer 1

[camelCaseVlad]

Вот как можно протестировать простую кнопку:

test('button executes Onclick ', () => {
    const wrapper = mount(<ButtonComponent onClick={jest.fn()} />);
    wrapper.find('button').simulate('click');
    expect(wrapper.props().onClick).toBeCalled();
  });

Вот вариант, как протестировать функцию, которая была передана как проп:

test('MyComponent', () => {
    const myFn = jest.fn();
    const props = { myFn, ...otherProps }
    const wrapper = mount(
        <MyComponent {props}/>
    );
       wrapper.find('button').simulate('click');
      wrapper.update();
      expect(wrapper.props().myFn).toBeCalled();
  });

Comments

[Fannasankh]

ну тут по сути, как я понимаю, тестируется то, что функция была вызвана. А как протестировать, что она была вызвана, сделала что-то конкретное и правильно обновила state.

[camelCaseVlad]

Нет, нарушается принцип Изоляции.

F.I.R.S.T Principles of Unit Testing - FAST, ISOLATED/INDEPENDENT, REPEATABLE, SELF-VALIDATING and THOROUGH/TIMELY
https://github.com/ghsukumar/SFDC_Best_Practices/w...

В компоненте МойКомпонент вы не должны тестировать функционал компонента МойАппКомпонент. МойКомпонент только отвечает за то, что при нажатии на него он вызывает МоюФункцию, а как на нее реагирует МойАппКомпонент тестируйте в самом МойАппКомпоненте.

[Fannasankh]

camelCaseVlad, хорошо... а я могу как-то сохранять state между вызовами функций? Например, я хочу два раза вызвать какую-то функцию и проверить после этого состояние state.

[camelCaseVlad]

не особо понимаю, о чем речь, сорри. сохранить стейт где, в юнит тесте?

[Fannasankh]

camelCaseVlad, про сохранить стейт вопрос отпал, почитал, сам разобрался. Остаётся вопрос, как я могу вызвать функцию из компонента. Нашёл только как эмулировать клик или изменение, а как вызвать произвольную функцию?

[Fannasankh]

нашёл, component.instance().МояФункция

[camelCaseVlad]

да, правильно.

вот пример как я проверяю что функция openLoginModal вызывается, если юзер хочет использовать Апп, будучи не залогиненым.

describe('When user not logged in', () => {
    let component;
    let wrapper;
    beforeEach(() => {
      wrapper = shallow(<AppComponent isUserLoggedIn={false} {...props} />);
      component = wrapper.instance();
    });
    it('invokes openLoginModal method', () => {
      component.openLoginModal = jest.fn();
      component.open(); // метод на компоненте Апп, который открывает сам Апп
      expect(component.openLoginModal).toHaveBeenCalled();
    });
  });