как проверить функцию реагирующей стрелки, связанную с состоянием компонента fullfull

Question

У меня есть компонент Statefull с функцией стрелки. Эта функция имеет дело с состоянием компонента.

    onMovieFindHandler = () => {
    let result = {...this.state.movies};

    if (this.state.sortBy.sortByTitle) {
        result = this.state.movies.filter(movie => movie.title.includes(this.state.searchQuery));
    } else {
        result = this.state.movies.filter(movie => movie.genre.includes(this.state.searchQuery));
    }

    this.setState({ movies: result });
}

Я использую эту функцию в моих дочерних компонентах.

 return (
        <ErrorBoundary>
            <SearchPanel 
                titleHandler={this.onTitleFilterHandler}
                genreHandler={this.onGenreFilterHandler}
                inputChangeHandler={this.onInputChangeHandler}
                sorting={this.state.sortBy}
                searchHandler={this.onMovieFindHandler} />
            <StatusBar moviesAmount={this.state.movies.length} />
            {movieCards}
            <Footer />
        </ErrorBoundary>
    )

Мой набор инструментов для тестирования: Jest / Enzyme Как я могу проверить эту функцию?

Я пытался сделать это следующим образом:

    it('component should filter movies by search query', () => {
    const movieHandlerMock = jest.fn();
    const wrapper = shallow(<MovieFinder searchQuery="Fifty" />);
    const instance = wrapper.instance();
    expect(instance.state.movies.length).toEqual(6);
    instance.onMovieFindHandler();
    expect(instance.onMovieFindHandler).toHaveBeenCalled();
    expect(instance.state.movies.length).toEqual(1);
})

Но последнее ожидание возвращает 6 вместо 1.

Код компонента: https://jsbin.com/kibomituni/edit?js,output

Answer 1

Вы можете найти компонент в своей мелкой оболочке, используя метод find , и вы можете получить доступ к конкретной пропускаемой передаче, используя метод prop .Это означает, что вы можете смоделировать функцию prop, вызываемую из дочернего компонента:

it('component should filter movies by search query', () => {
  const wrapper = shallow(<MovieFinder searchQuery="Fifty" />);
  expect(wrapper.state().movies.length).toEqual(6);

  wrapper.find('SearchPanel').prop('searchHandler')();

  expect(wrapper.state().movies.length).toEqual(1);
})

Я думаю, что это все, что вы должны проверять с помощью модульных тестов - т.е. проверять, что эффекты были применены, а не проверятьчто был вызван внутренний метод.Однако, если вы хотите явно подтвердить, что onMovieFindHandler был вызван, вы можете добавить в пару строк:

it('component should filter movies by search query', () => {
  const wrapper = shallow(<MovieFinder searchQuery="Fifty" />);
  expect(wrapper.state().movies.length).toEqual(6);

  const instance = wrapper.instance();
  jest.spyOn(instance, 'onMovieFindHandler');

  wrapper.find('SearchPanel').prop('searchHandler')();

  expect(wrapper.state().movies.length).toEqual(1);
  expect(instance.onMovieFindHandler).toHaveBeenCalled();
});

РЕДАКТИРОВАТЬ:

вам нужно установить состояние searchQuery спропущенная опора - для этого измените конструктор на:

constructor(props) {
    super(props);
    this.state = {
        movies: [
            {
                title: 'Fifty Shades Freed',
                genre: 'Action',
                year: '2001',
                imgUrl: '123'
            },
            {
                title: 'Zootopia',
                genre: 'Drama',
                year: '2007',
                imgUrl: '123'
            },
            {
                title: 'Star Wars The Last Jedi',
                genre: 'Comedes',
                year: '1998',
                imgUrl: '123'
            },
            {
                title: 'Black Panther',
                genre: 'Adventure',
                year: '2010',
                imgUrl: '123'
            },
            {
                title: 'Coco',
                genre: 'Action',
                year: '2004',
                imgUrl: '123'
            },
            {
                title: 'Thor Ragnarok',
                genre: 'Drama',
                year: '2003',
                imgUrl: '123'
            }
        ],
        sortBy: {
            sortByTitle: true,
            sortByGenre: false,
        },
        searchQuery: props.searchQuery
    }
}