Я пытаюсь проверить, был ли называется componentWillMount и что мой тестКак шпионить componentWillMount с использованием пошутить и фермента
test('calls `componentWillMount` before rendering',() => {
let fn = jest.fn(SomeComponent.prototype.componentWillMount)
mount(<SomeComponent />)
expect(fn).toHaveBeenCalled()
})
Но даже если метод componentWillMount называется, тест не проходит. Что мне здесь не хватает?
Я не знаю, если другие ответы помогли с вопросом, но вам не нужно, чтобы проверить componentWillMount. Реакция уже должна выполнить это тестирование для вас.
Более уместным для вашего тестирования было бы проверить функции или действия, которые вы вкладываете в этот метод для своего компонента.
Если вы выполняете вызов API, используя функцию, основанную на реквизитах или что-то еще, это то, что вы должны тестировать. Откажитесь от функции/действия/кода, которые запускают триггеры componentWillMount, и делайте над этим утверждения и ожидания.
Пример:
Компонент:
class YourComponent extends Component {
componentWillMount() {
/*this fetch function is actually what you want to test*/
this.props.fetch('data')
}
render() {
/* whatever your component renders*/
}
}
Тесты:
test('should call fetch when mounted',() => {
let mockFetch = jest.fn()
const wrapper = mount(<SomeComponent fetch={mockFetch}/>);
expect(wrapper).toBeDefined();
expect(mockFetch).toHaveBeenCalled();
expect(mockFetch.mock.calls[0]).toEqual(['data'])
});
Я бы сначала spy по методу componentWillMount компонента, но также использовал .and.CallThrough(), чтобы предотвратить его издевательство над его содержимым. Надеюсь, что это помогает:
it('should check that the componentWillMount method is getting called',() => {
spyOn(SomeComponent.prototype, 'componentWillMount').and.callThrough();
const wrapper = mount(<SomeComponent />);
expect(wrapper).toBeDefined();
expect(SomeComponent.prototype.componentWillMount).toHaveBeenCalledTimes(1);
});
Попробуйте это:
test('calls `componentWillMount` before rendering',() => {
const onWillMount = jest.fn();
SomeComponent.prototype.componentWillMount = onWillMount;
mount(<SomeComponent />);
expect(onWillMount).toBeCalled();
});
Я не считаю, что выше ответ решает проблему. Это шутка, позволяющая вам использовать метод, но не позволяет вам callThrough следить за его статусом вызова. Решение, которое наилучшим образом подходит для меня, - это настроить тест с помощью компонента, который имеет componentWillMount. Опираясь на шутку, это усложнит ситуацию.
describe('componentWillMount',() => {
const calls = []
class Component1 extends Components {
componentWillMount() {
calls.push(new Date)
}
render() { ... }
}
afterEach(() => calls.splice(0, calls.length))
it('has been called',() => {
mount(<Component1 />)
expect(calls.length).toBe(1)
})
})
могли бы вы уточнить, если функция называется внутри componentWillMount фактически является частью самого класса, как: 'this.fetch ('данные');'? – nbkhope
'this.prop.fetch ('data')' является просто примером. Для этого я просто вызываю функцию, переданную 'YourComponent' через реквизиты. Так что нет, не часть самого класса. Вы действительно можете проверить что-либо, но основной момент здесь - вам не нужно тестировать 'componentWillMount' или любой из методов реагирования на жизненный цикл. React/Facebook делает это за вас. Просто проверьте, работает ли код, который вы написали внутри этих методов жизненного цикла. – scotthorn0
да, я понимаю. Извините, я не был достаточно ясен. Я понимаю, как тестировать все внутри функции жизненного цикла, если они являются функциями, которые были переданы через реквизиты. Но как насчет функций, которые принадлежат компоненту? Как бы вы протестировали, что эта функция была вызвана? Если 'this.props.fetch()' был вместо 'this.fetch()', как бы вы проверили это внутри 'componentWillMount', функция' this.fetch() 'вызывалась несколько раз? – nbkhope