Vyzerajúci klientHeight a scrollHeight v reakcii + Enzým pre test - reakcie, testovanie jednotky, jestjs, enzým

Máme komponent React nazývaný ScrollContainer, ktorý volá funkciu prop, keď sa jeho obsah posúva dole.

V podstate:

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 sa v metóde renderovania nastavuje takto:

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

Chcem otestovať túto logiku pomocou Jest + Enzyme.

Potrebujem spôsob, ako vynútiť vlastnosti clientHeight, scrollHeight a scrollTop byť hodnotami podľa môjho výberu pre testovací scenár.

S mount namiesto plytkých môžem získať tieto hodnoty, ale sú vždy 0. Musím ešte nájsť spôsob, ako ich nastaviť na niečo nulové. Môžem nastaviť kontajner wrapper.instance().container = { scrollHeight: 0 } atď., ale toto upravuje iba kontext testu, nie skutočnú súčasť.

Akékoľvek návrhy by ste ocenili!

odpovede:

JSDOM nevykonáva žiadne skutočné vykresľovanie - je to lensimuluje štruktúru DOM - takže veci ako rozmery prvkov nie sú vypočítané tak, ako by ste mohli očakávať.Ak chytáte rozmery pomocou volaní metód, existujú spôsoby, ako im imitovať vo vašom teste Napríklad:

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

To samozrejme nebude vo vašom príklade pracovať. Je možné, že tieto vlastnosti môžu byť premenené na prvky a imitované zmeny; ale myslím si, že to nepovedie k mimoriadne zmysluplným / užitočným testom.

Pozri tiež tohto vlákna