Подигравателен клиентХейт и превъртанеХейт в React + Ензим за тест - реакции, тестване на единица, jestjs, ензим

Ние имаме React компонент, наречен ScrollContainer, отколкото призовава функцията prop, когато съдържанието му е превъртано до дъното.

По принцип:

componentDidMount() {
const needsToScroll = this.container.clientHeight != this.container.scrollHeight

const { handleUserDidScroll } = this.props

if (needsToScroll) {
this.container.addEventListener("scroll", this.handleScroll)
} else {
handleUserDidScroll()
}
}

componentWillUnmount() {
this.container.removeEventListener("scroll", this.handleScroll)
}

handleScroll() {
const { handleUserDidScroll } = this.props
const node = this.container
if (node.scrollHeight == node.clientHeight + node.scrollTop) {
handleUserDidScroll()
}
}

this.container е зададен по следния начин в метода за рендериране:

<div ref={ container => this.container = container }>
...
</div>

Искам да тествам тази логика с помощта на Jest + Enzyme.

Нуждая се от начин да наложа на свойствата на ClientHeight, scrollHeight и scrollTop да бъдат стойности, избрани за тестовия сценарий.

С монтирането вместо с плитки мога да получа тези стойности, но те винаги са 0. Трябва да намеря някакъв начин да ги настроя на нещо, което не е нула. Мога да поставя контейнера wrapper.instance().container = { scrollHeight: 0 } и т.н., но това само променя контекста на теста, а не действителния компонент.

Всички предложения ще бъдат оценени!

Отговори:

JSDOM не прави никакво реално изобразяване - простосимулира структурата на DOM - така нещата не се изчисляват така, както бихте могли да очаквате. Ако вземете размери чрез извиквания на методи, има начини да се подигравате с тях в теста.

 beforeEach(() => {
Element.prototype.getBoundingClientRect = jest.fn(() => {
return { width: 100, height: 10, top: 0, left: 0, bottom: 0, right: 0 };
});
});

Това очевидно няма да работи във вашия пример. Възможно е да се отменят тези свойства върху елементите и фалшивите промени в тях; но подозирам, че няма да доведе до особено значими / полезни тестове.

Вижте също тази тема