Ожидаемая фиктивная функция была вызвана один раз, но она была вызвана ноль раз.Как это исправить?

Question

Я сделал e2e тест для компонента приложения, используя Enzyme, но этот тест падает со следующим сообщением об ошибке:

Ожидается, что фиктивная функция была вызвана один раз, но она была вызвана ноль раз.

В чем причина проблемы? Заранее благодарю за помощь.

Код с ошибкой теста: https://codesandbox.io/s/x348jx4qzw

Тестовый код:

import React from "react";
import Enzyme, { shallow } from "enzyme";
import Adapter from "enzyme-adapter-react-16";

import App from "./app.js";
const movieTitlesCollection = [`Fantastic Beasts`];

Enzyme.configure({ adapter: new Adapter() });

describe(`AppComponent`, () => {
  it(`should simulate card title click`, () => {
    const handleClick = jest.fn();
    const wrapper = shallow(
      <App movieTitles={movieTitlesCollection} onClick={handleClick} />
    );
    const filmCardTitle = wrapper.find(`.small-movie-card__link`);

    expect(filmCardTitle.length).toEqual(1);
    filmCardTitle.simulate(`click`);
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Answer 1

свойство onClick должно быть предоставлено для small-movie-card__title в компоненте App;

const App = ({movieTitles, onClick}) => {
      const filmCard = movieTitles.map((movieTitle, index) =>
        <article className="small-movie-card catalog__movies-card" key={index}>
          <button className="small-movie-card__play-btn" type="button">Play</button>
          <div className="small-movie-card__image">
            <img src="img/fantastic-beasts-the-crimes-of-grindelwald.jpg" alt="Fantastic Beasts: The Crimes of Grindelwald" width="280" height="175"/>
          </div>
          <h3 className="small-movie-card__title">
            <a className="small-movie-card__link" href="movie-page.html" onClick={onClick}>
              { movieTitle }
            </a>
          </h3>
        </article>
      );

other code...