Тестирование функций с аргументами в React с Jest Enzyme

Question

У меня есть функция с именем toggleFilter () в компоненте реагирования, которая выглядит следующим образом:

toggleFilter = (filterType, filterName) => {
        const filterApplied = this.state.appliedFilterList[filterType].includes(filterName);

        if (filterApplied) {
            //Remove the applied filter
            this.setState(prevState => ({
                appliedFilterList: {
                    ...prevState.appliedFilterList,
                    [filterType]: prevState.appliedFilterList[filterType].filter(filter => filter !== filterName)
                }
            }));
        } else {
            //Add the filter
            this.setState(prevState => ({
                appliedFilterList: {
                    ...prevState.appliedFilterList,
                    [filterType]: [...prevState.appliedFilterList[filterType], filterName]
                }
            }));
        }
    };

Эта функция передается дочерним компонентам как:

 <ChildComponent  toggleFilter={this.toggleFilter} />

Итак, я пытаюсь проверить эту функцию toggleFilter () следующим образом:

 it("checks for the function calls", () => {
    const toggleFilterMockFn = jest.fn();
    const component = shallow(
        <ProductList
            headerText="Hello World"
            productList={data}
            paginationSize="10"
            accessFilters={["a 1", "a 2"]}
            bandwidthFilters={["b 1", "b 2"]}
            termsFilters={["t 1", "t 2"]}
            appliedFilterList={appliedFilter}
            toggleFilter={toggleFilterMockFn}
        />
    );
    component.find(FilterDropdownContent).prop("toggleFilter")({ target: { value: "someValue" } });
});

Но я получаю сообщение об ошибке:

TypeError: Cannot read property 'includes' of undefined

Что может быть причиной проблемы?Может кто-нибудь, пожалуйста, помогите мне с этим.

РЕДАКТИРОВАТЬ 1: Я попробовал следующий тестовый пример:

expect(toggleFilterMockFn).toHaveBeenCalledWith(appliedFilter, "access");

Но я получаю ошибку ниже:

expect(jest.fn()).toHaveBeenCalledWith(expected)

    Expected mock function to have been called with:
      [{"access": ["Access Type Of The Service"], "bandwidth": ["the allowed band width ", "the allowed band width"], "term": ["term associated with the service"]}, "access"]
    But it was not called.

Answer 1

Вы не можете отобразить родительский объект и протестировать дочернюю функцию, подобную этойВместо этого вы должны визуализировать <FilterDropdownContent /> напрямую, а затем написать тест, который имитирует событие (например, щелчок) и проверяет, была ли вызвана функция.

Примерно так, например:

import React from 'react';
import { shallow } from 'enzyme';

describe('<FilterDropdownContent />', () => {
  let wrapper, toggleFilter;
  beforeEach(() => {
    toggleFilter = jest.fn();
    wrapper = shallow(
      <FilterDropdownContent
        toggleFilter={toggleFilter}
      />
    );
  });

  describe('when clicking the .toggle-filter button', () => {
    it('calls `props.toggleFilter()` with the correct data', () => {
      wrapper.find('.toggle-filter').simulate('click');
      expect(toggleFilter).toHaveBeenCalledWith({ target: { value: 'someValue' } });
    });
  }):
});

В этом примере нажатие на ссылку с классом .toggle-filter вызывает функцию, но вы должны иметь возможность адаптировать ее к вашей конкретной реализации.