Как протестировать метод, вызываемый внутри экземпляра компонента, используя Jest и Enzyme

Question

как мы тестируем (шпионим) внутреннюю функцию экземпляра здесь this.props.onSave(), используя Jest.

class AddImage extends Component {  

   constructor(props) {
    this.onContinue = this.onContinue.bind(this);
   }

   onContinue() {
     this.props.onSave(img)
       .then(()=>{
          //redirect to some url
        });
   }
}

onContinue вызывается по нажатию кнопки.

код тестового файла -

describe('AddImage', () => {
 beforeAll(() => {
    const enzymeWrapper = ShallowRender(<AddImage {...props} />);
    onContinueSpy = jest.spyOn(enzymeWrapper.instance(),'onContinue');
    // how to spy onSave
  });

  it('should continue and save image',()=>{
    enzymeWrapper.find('button').simulate('click'); //click simulated
    expect(onContinueSpy).toHaveBeenCalled(); // working as expected
  });
});

Теперь, как шпионить метод сохранения .

Answer 1

Поскольку onSave - опора, вы можете создать шпиона в своем тесте и просто пройти его. Не то, чтобы вы звонили .then в результате onSave звонка, поэтому вы должны вернуть выполненное обещание.

describe('AddImage', () => {
 let onSave 
 let response
 beforeAll(() => {
    response = Promise.resolve()
    onSave = jest.fn(()=> response)
    const enzymeWrapper = ShallowRender(<AddImage {...props} onSave={onSave} />);

  });

  it('should continue and save image',async()=>{
    enzymeWrapper.find('button').simulate('click'); //click simulated
    expect(onSave).toHaveBeenCalledWith(); 
    await response // if you want to test the redirect you need to wait here
    // test the redirect here
  });
});