Как высмеять метод жизненного цикла компонента React с помощью Jest and Enzyme?

Question

Документы энзимов для полного DOM Rendering here содержит следующий пример шпионить метода жизненного цикла с Синоном:

describe('<Foo />',() => { 

    it('calls componentDidMount',() => { 
    sinon.spy(Foo.prototype, 'componentDidMount'); 
    const wrapper = mount(<Foo />); 
    expect(Foo.prototype.componentDidMount.calledOnce).to.equal(true); 
    }); 
}); 

Что является эквивалент этого с помощью фиктивных функций из Шутки?

Я использую Create-React-App, и не хотел бы включать Sinon, если то же самое можно достичь с помощью Jest.

Вот что я ожидал бы испытание выглядеть следующим образом:

describe('<App />',() => { 

    it('calls componentDidMount',() => { 
    jest.fn(App.prototype, 'componentDidMount'); 
    const wrapper = mount(<App />); 
    expect(App.prototype.componentDidMount.mock.calls.length).toBe(1); 
    }); 
}); 

В этом случае App.prototype.componentDidMount не ссылается на тот же функцию шпиона, как это будет делать с Синоном.

Документы Jest о том, как макетные функции фактически работают, немного ограничены. Я наблюдал за обсуждением here вокруг того, что делает jest.fn(), но, похоже, это не эквивалентно синону.().

Как я могу повторить этот тест с помощью Jest?

Answer 1

Это не будет работать со шуткой, так как jest.fn имеет только параметр для реализации. Но что более важно, вы не должны следить за внутренностями объекта, который хотите протестировать. Вы должны думать о Foo как о черном ящике, в котором вы можете поместить некоторые свойства и получить некоторый материал, отложенный назад. Затем вы понимаете, что нет необходимости проверять внутренние функции Foo, например componentDidMount, получить вызов. Единственное, что имеет значение, это выход черного ящика.

Но если вы действительно хотите сделать тест все равно:

const spy = jest.fn() 
const componentDidMount = Foo.prototype.componentDidMount 
Foo.prototype.componentDidMount = function(){ 
    spy() 
    componentDidMount() 
} 

Answer 2

По Jest 19, вы можете сделать это:

describe('<App />',() => { 
    it('calls componentDidMount',() => { 
    const spy = jest.spyOn(App.prototype, 'componentDidMount'); 
    const wrapper = mount(<App />); 
    expect(spy).toHaveBeenCalled(); 
    spy.mockReset(); 
    spy.mockRestore(); 
    }); 
}); 

jest.spyOn возвращает mock function со всеми обычно доступными методами, такими как mockClear, mockReset и mockRestore.

Обязательно настройте своего шпиона перед вами mount с помощью фермента или create с помощью средства реагирования-тестирования, чтобы созданный экземпляр ссылался на функцию издевательства.