Модульное тестирование React-redux: тестирование метода внутри компонента класса, единственной функцией которого является отправка действия в хранилище

Question

Я тестирую свой компонент списка книг в моем приложении React-redux, в основном он показывает список сохраненных книг, которые есть у пользователя, путем сопоставления массива книг с компонентом BookCard, который имеет две кнопки: изменитьКнига и удалить книгу.Я успешно выполнил все свои тесты, за исключением метода удаления книги, этот метод отправляет в хранилище только действие по удалению книги из состояния (еще не выполнил HTTP-запрос к функциональности бэкэнда), компонент BookListсвязанный компонент.Моя проблема: я не могу удалить BookCard из Wrapper / Instance / MockStore, хотя в самом приложении это работает.Поэтому я не знаю, является ли чрезмерным тестирование этой кнопки, потому что я уже протестировал действие и редуктор для этой цели.

Я много чего пробовал, выполняя метод deleteBook из оболочкис помощью функций mount () и shallow () (выполняющих соответствующие погружения () с shallow ()) из фермента, затем проверяя, существует ли селектор для BookCard (и да, он все еще существует), затем я попытался создать экземпляр компонентас shallow (). instance (), но то же самое, он не удаляет.И, наконец, я попробовал проверить, удалялась ли книга из mockStore, который я создал специально для этого теста (используя store.getState ()), и нет, он не удалял книгу

// State and store 

let state = {
  dataState:
  {
    books: {
      'Random,Jane Doe':
      {
        name: 'Random',
        author: 'Jane Doe',
        keyTakeaways: [{ 'value': 'Nice!' }]
      }
   },
    users: {
      1: {
        userName: 'Jon Doe',
        email: 'jondoe@gmail.com'
      }
    }
  },
  uiState: {
    currentUser: 1
  }
};
let initialStore = configureMockStore(state);

// Test

it('Deletes books properly', () => {
      const name = state.dataState.books['Random,Jane Doe'].name;
      const author = state.dataState.books['Random,Jane Doe'].author;
      bookListWrapper = shallow(<BookList store={initialStore} />);
      bookListWrapper.dive().dive().instance().deleteBook(name, author);
      expect(initialStore.getState()).toEqual(true);
});

// Book Card component return statement

return <>
      <Card id={`card-${id}`} key={id} style={{ position: 'relative' }}>
        <ButtonBase id={id} style={{ width: '100%' }} onClick={this.openDetails}>
          <div className={classes.content}>
            <div className={classes.info}>
              <div>
                <Typography className={classes.title} color="textSecondary">Book's name</Typography>
                <Typography className="book-name" color="textPrimary">{book.name}</Typography>
              </div>
              <div>
                <Typography className={classes.title} color="textSecondary">Author's name</Typography>
                <Typography className="author" color="textPrimary">{book.author}</Typography>
              </div>
            </div>
            <div>
              <Typography style={{ fontSize: 13, marginTop: 20 }} color='textSecondary'>Key Takeaways</Typography>
              <div className={classes.column}>
                { //Maps the books.keyTakeaways array to show each corresponding value
                  book.keyTakeaways.map((keyTakeaways, idx) => (
                    keyTakeaways.value !== ''
                      ? <p id={`key-takeaway-${idx}`} className={classes.list} key={idx}>{idx + 1}. {keyTakeaways.value}</p>
                  : <Typography key={idx} align="center" color="textPrimary">No learnings or notes for this book</Typography> // In case no Key Takeaways were added
                  ))
                }
              </div>
            </div>
          </div>
        </ButtonBase>
        <div style={{ position: 'absolute', float: 'right', bottom: 20, right: 20 }}>
          <button className={classes.button} id={`delete-${id}`} type="button" onClick={this.deleteBook}>Delete</button>
          <button className={classes.button} id={`modify-${id}`} type="button" onClick={this.modifyBook}>Modify</button>
        </div>
      </Card >
      {details}
    </>

// Delete book method from child (BookCard) component
deleteBook(event) {
    event.preventDefault();
    const { author, name } = this.state; 
    this.props.deleteBook(name, author); // Sends data to parent
}

// Delete book method from parent (BookList) component
deleteBook(name, author) {
    this.props.deleteBook(name, author); // Dispatch action to store
}

Результатыв том, что ни одна карта не удаляется из хранилища или компонента, когда это должно быть, потому что я выполняю метод deleteBook и отправляю действие в хранилище.Стоит отметить, что я использую пакет redux-mock-store для создания ложного хранилища для тестов

Редактировать: я уже пытался смоделировать щелчок на кнопке удаления, и тоже не работает.