Как отсоединить макет функции от прототипа реагирующего компонента, чтобы не повлиять на другие тесты?

Question

У меня есть два теста в первом тесте. Я смоделировал метод handleTextChange, чтобы узнать, что он был вызван с изменением текста.

Во втором тесте я больше не хочу его высмеивать, скорее, я хочу его реальныйБудет вызвана реализация.

Файл TodoForm.jsx

export class TodoForm extends Component {


    constructor(props) {
        super(props);
        this.state = {
            txtValue: ""
        }

        this.handleTxtChange = this.handleTxtChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick = () => {
        console.log("handle click is called");
    }


    handleTxtChange(e) {
        console.log("i am called", e.target.value);
        this.setState({ txtValue: e.target.value });
    }
    render() {
        return (
            <div>
                <input type="text" placeholder="enter task name" value={this.state.txtValue} onChange={this.handleTxtChange} />
                <button onClick={this.handleClick}>Clik</button>
            </div>
        )
    }
} 

в моем тестовом файле

import React from "react";
import { shallow } from "enzyme";
import { TodoForm } from "../todoform";


it("must call the handeTxtchange with change text of textbox", () => {

    //in this test i want to mock handleTxtChange to 
    //know that is has been called with text cahnge


    const mocked = jest.fn((e) => console.log("mock get called", e.target.value));

    TodoForm.prototype.handleTxtChange = mocked;

    const wrapper = shallow(<TodoForm />);

    wrapper.find("input[type='text']").simulate("change", { target: { value: "hello" } });

    expect(mocked).toHaveBeenCalled();


});


it("user must be able to type in inputbox", () => {

    //in this test i don't want to mock the handleTxt change anymore 
    //(but it calls the mock function of previous test)


    const wrapper = shallow(<TodoForm />);

    wrapper.find("input[type='text']").simulate("change", { target: { value: "hello" } });
    wrapper.update();
    expect(wrapper.find("input[type='text']").prop("value")).toEqual("hello");
})

Answer 1

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

it("must call the handeTxtchange with change text of textbox", () => {
    const spy = jest.spyOn(TodoForm.prototype, 'handleTxtChange');

    const wrapper = shallow(<TodoForm />);

    wrapper.find("input[type='text']").simulate("change", { target: { value: "hello" } });

    expect(spy).toHaveBeenCalled();
   
    // don't forget to clear the spy
    spy.mockClear();
});

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

it("must call the handeTxtchange with change text of textbox", () => {
    const mocked = jest.spyOn(TodoForm.prototype, 'handleTxtChange');
    
    // override the implementation
    mocked.mockImplementation(() => "mock");

    const wrapper = shallow(<TodoForm />);

    wrapper.find("input[type='text']").simulate("change", { target: { value: "hello" } });

    expect(mocked).toHaveBeenCalled();
   
    mocked.mockRestore();
});