Невозможно передать контрольный пример в React, говоря имитировать функцию onClick ()

Question

Я работаю над проектом на HackerRank, где я прошел все тестовые случаи, кроме имитации функции onClick или onSubmit. Я не знаю, где я иду не так, потому что я попробовал весь подход после обновления документации

Вот мой код

Mail.component

export class Mail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeMail: this.props.mail
        };
        this.handleCompose = this.handleCompose.bind(this);
    }

    handleCompose() {
    console.log("=========================Compose==================")
        this.props.storeComposeMail(this.props.inboxData);
    }

    render() {
         <div>
<NavLink
  className="composebtn"
  to="/composemail">

  <button onClick={this.handleCompose}
    className={
      "btn-success pull-right composebtn" +
      (this.props.folder == "draft" ? "" : " visible")}
 > Edit</button>

</NavLink>
    </div>

MytestCase

describe("without store", () => {
    let wrapper;
    const mockLoginfn1 = jest.fn();
    test("submit click event", () => {
        const spy = jest.spyOn(Mail.prototype, "handleCompose");
        var data = {
            id: "",
            from: "",
            to: "",
            subject: "",
            time: "",
            body: ""
        };
        const wrapper = shallow(
            <Mail
                storeComposeMail={mockLoginfn1}
                folder="inbox"
                inboxData={data}
                mail={1}
            />
        );

        const Button = wrapper.find("NavLink").at(0);
        Button.simulate("click");
        expect(spy).toHaveBeenCalledTimes(1);
    });

Я получаю ошибка вроде этой

FAIL  src/test/Mail.spec.js

  ● without store › submit click event

    expect(jest.fn()).toHaveBeenCalledTimes(1)



    Expected mock function to have been called one time, but it was called zero times.



      at Object.test (src/test/Mail.spec.js:61:21)

          at new Promise (<anonymous>)

      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)

          at <anonymous>

Пожалуйста, помогите мне, так как я не знаю, что функция даже не срабатывает. Любая помощь будет оценена

Answer 1

У вас есть событие нажатия кнопки, а не компонента <NavLink />, поэтому найдите кнопку, а затем смоделируйте нажатие на эту кнопку. Это должно решить ваш тест.

describe('without Store', () => {
  it('Simulate click event', () => {
    const spy = jest.spyOn(Mail.prototype, 'handleCompose');
    const wrapper = mount(<Mail />);
    const Button = wrapper.find('button').at(0);
    Button.simulate('click');
    expect(spy).toHaveBeenCalled();
  });
});

Еще одна вещь, которую я хотел бы добавить, это то, что тестирование состояний и методов класса означает, что мы тестируем детали реализации, которые не нужны, если только или пока у вас не будет бизнес-логина в этих методах или были выполнены некоторые преобразования.