Функция макета не вызывается при щелчке при тестировании с шуткой и энзимом

Question

Я пытаюсь проверить подключенный к реактиву компонент-редуктор, а именно корзину, и не могу запустить приведенный ниже тест.Я хочу посмотреть, вызывается ли действие внутри обработчика щелчка для кнопки (импортировано из пакета material-ui).

Действие сопоставляется с реквизитами через mapDispatchToProps.

const mapDispatchToProps = dispatch =>
  bindActionCreators(SelectItemGalleryActions, dispatch);

Я также использую

import configureStore from 'redux-mock-store';

для передачи ложного хранилища моему тестируемому компоненту.

Обработчик вызывается, но шпион не записывает, что он был вызван.Я пробовал большинство решений, которые я нашел здесь или на github (мелкие, симуляция, погружения, используя jest.fn () вместо spy () ...);У Вас есть какие-либо идеи?Я предполагаю, что вызывается другая ссылка на фиктивную функцию, которую я пытаюсь проверить.

Сначала я передаю фиктивный магазин и действие

const props = {
  store: mockStore({ selectItemGallery: { cartItems: [{ name: 'one' }] } }),
  removeAllItemsFromCartAction: spy()
};
const wrapper = mount(<Cart {...props} />);

После этого я ищу свою кнопку и моделирую щелчки по ней

const button = wrapper.find(Button).at(0);
button.prop('onClick')('test1');
button.prop('onClick')('test2');

Щелчки работают при запуске теста.Я получаю выходы console.log () из обработчика.

Ожидания

expect(props.removeAllItemsFromCartAction.called).toBe(true);

Однако это не называется.

Вот фактический обработчик

 <Button
    color="primary"
    onClick={x => {
      console.log(`onClick called on component with info ${x}`);
      removeAllItemsFromCartAction();
      console.log('removeAllItemsFromCartAction call is above me');
    }}>    
        {t('Clear All')}
 </Button>

На консоли отображается

Любые советы или идеи приветствуются.Спасибо.

Версии:

"enzyme": "^3.8.0",
"enzyme-adapter-react-16": "^1.7.1",
"jest": "^23.6.0",
"sinon": "^7.2.2",
"react": "^16.8.2"

Answer 1

Кажется, это , а не правильный способ проверить, сопоставлено ли действие с реквизитом через mapDispatchToProps назывался. Я отредактировал свой вопрос, чтобы подчеркнуть, что действие было составлено таким образом. Ответ Чейз был до того, как я отредактировал, большое ему спасибо за помощь.

Если бы я только обратил больше внимания на https://redux.js.org/recipes/writing-tests

На самом деле вызывается отправка из фиктивного хранилища, и нам просто нужно проверить, отправляет ли оно правильное действие.

Правильный тест будет:

  it('Should call the removeAllItemsFromCartAction', () => {
    const props = {
      store: mockStore({ selectItemGallery: { cartItems: [{ name: 'one' }] } })
    };
    const wrapper = mount(<Cart {...props} />);
    const button = wrapper.find(Button).at(0);
    button.prop('onClick')();
    console.log(props.store.getActions());
    expect(props.store.getActions()).toEqual([
      { type: 'REMOVE_ALL_ITEMS_FROM_CART' }
    ]);
  });

Answer 2

Эти тесты могут быть очень привередливыми, но я подозреваю, что проблема заключается в том, как вы настраиваете своего шпиона, так как в соответствии с вашими журналами консоли, функция получает удар.Во-первых, я не думаю, что вам на самом деле нужен шпион, и вы могли бы просто использовать фиктивную функцию, которая передается, пока removeAllItemsFromCartAction() фактически находится в подпорках вашего компонента.

const myMock = jest.fn();
const props = {
  store: mockStore({ selectItemGallery: { cartItems: [{ name: 'one' }] } }),
  removeAllItemsFromCartAction: myMock
};
const wrapper = mount(<Cart {...props} />);
const button = wrapper.find(Button).at(0);
button.simulate("click");
expect(myMock).toHaveBeenCalled();

Возможно, вы ужепопробовал это, но это моя единственная идея здесь.