Фермент Найти по имени класса и смоделировать щелчок

Question

В энзиме имитация щелчка по элементу, найденному className, похоже, не работает. Проблема в том, что mockFn не дразнит toggleSort. Но в других случаях насмешка над функцией таким образом работает отлично. Почему несоответствия в способе, которым фермент управляет функциями класса насмешки? Все нижеприведенные случаи для проверки обработчика событий toggleSort не работают.

import React from "react";

export default class Hello extends React.Component {
  toggleSort = e => {
    console.log(e, "dd");
  };
  render() {
    return (
      <button type="button" className="button" onClick={this.toggleSort} />
    );
  }
}

Тест:

import React from "react";

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

import Hello from "./Hello";

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

describe("Hello", () => {
  it("should do the right thing", async () => {
    const mockFn = jest.fn();
    const component = shallow(<Hello />);

    component.instance().toggleSort = mockFn;

    await component
      .find(".button")
      .at(0)
      .simulate("click");

    expect(mockFn).toBeCalled();
  });

  it("should work with spy", () => {
     const component = shallow(<Hello />);
     const spy = jest.spyOn(component.instance(), "toggleSort");
     component.update();
     component
       .find(".button")
       .at(0)
       .simulate("click");
     expect(spy).toHaveBeenCalled();
   });

   it("should work with prototype", () => {
    const mockFn = jest.fn()
    Hello.prototype.toggleSort = mockFn
    const component = shallow(<Hello />);
    component
      .find(".button")
      .at(0)
      .simulate("click");
    expect(mockFn).toHaveBeenCalled();
  });
});

Ниже приведен тестовый файл для codeandbox https://codesandbox.io/s/n0jv07kqll

Answer 1

toggleSort является свойством экземпляра, поэтому вам придется смоделировать использование экземпляра, поскольку он не существует в прототипе класса.

onClick напрямую связан с this.toggleSort, поэтому вам придется либо принудительно выполнить повторную визуализацию, чтобы она снова была привязана к вашему шпиону:

it("should work with spy", () => {
  const component = shallow(<Hello />);
  const spy = jest.spyOn(component.instance(), "toggleSort");
  component.setState({});  // <= force re-render (sometimes component.update() isn't enough)
  component
    .find(".button")
    .at(0)
    .simulate("click");
  expect(spy).toHaveBeenCalled();  // Success!
});

... или вызовите его, используя функцию стрелки, чтобы вызывалось текущее значение this.toggleSort:

<button type="button" className="button" onClick={() => this.toggleSort()} />

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

it("should work with spy", () => {
  const component = shallow(<Hello />);
  const spy = jest.spyOn(component.instance(), "toggleSort");
  component
    .find(".button")
    .at(0)
    .simulate("click");
  expect(spy).toHaveBeenCalled();  // Success!
});