Как смоделировать событие щелчка с фиктивной функцией в энзиме и Jest?

Question

У меня есть компонент foo. Я хочу смоделировать нажатие кнопки с помощью фиктивной функции

 export default class Foo extends Component {
        btnClick() {
            console.log("hello...");
        }
        render() {
            return (
                <div>
                    <h2>Hello</h2>
                    <button onClick={this.btnClick.bind(this)} id="btn">Click</button>
                </div>
            );
        }
    }

Мой тестовый код выглядит следующим образом

 it("must call the mock method with button click", () => {

        const wrapper = mount(<Foo />);
        wrapper.instance().btnClick = jest.fn(() => {
            return 8;
        });

        wrapper.update();

        const btn = wrapper.find("#btn");
        btn.simulate("click");

        expect(wrapper.instance().btnClick).toHaveBeenCalled();
    })

Моделирование события нажатия вызывает компоненты реального методавместо вызова имитирующего метода.

Я знаю, что это можно сделать, передавая фиктивную функцию как реквизит компоненту <Foo/>.

Я хочу знать, есть ли другой способ имитировать щелчок (, т. Е. Частный для компонента ) с помощью метода mock.

Answer 1

import React from "react";
import { shallow } from "enzyme";
import Foo from "path/Foo"

describe("Executes a handler function", () => {
  it("must call the mock method with button click", () => {
    const wrapper = shallow(<Foo />);
    const button = wrapper.find("button");
    const instance = wrapper.instance();

    instance.btnClick = jest.fn(instance.btnClick);

    button.simulate("click");
    expect(instance.btnClick).toHaveBeenCalled();
  });
});

Answer 2

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

import Adapter from 'enzyme-adapter-react-16'
import React, {Component} from 'react'
import {configure, mount} from 'enzyme'

configure({adapter: new Adapter()})

export default class Foo extends Component {
  btnClick() {
    console.log("hello...")
  }

  render() {
    return (
      <div>
        <h2>Hello</h2>
        <button
            id="btn"
            onClick={this.btnClick.bind(this)}
        >
          Click
        </button>
      </div>
    )
  }
}

it("must call the mock method with button click", () => {
    let spy =  jest.spyOn(Foo.prototype, 'btnClick')
      .mockImplementation(() => 8)

    const wrapper = mount(<Foo/>)
    const btn = wrapper.find("#btn")
    btn.simulate("click")

    expect(spy).toHaveBeenCalled()
})