Обработчик клика не изменяет атрибут стилей при тестировании Enzyme
Всем привет! У меня есть компонент, внутри которого есть компонент кнопки.
<div className={styles.roulette}>
{chosenProjectElement}
<div className={styles.action}>
<PromoButton onClick={onSpin} />
{triangleIcon}
</div>
<div className={styles.wheel} ref={wheelRef} data-testid="wheel">
<CircleIcon layout={layout} />
</div>
</div>
При клике на кнопку, вычисляется количество градусов и через атрибут вешаются стили. Вот ниже логика обработки клика
const onSpin = useCallback((): void => {
if (!wheelRef.current) return
if (updatingTimerId.current) {
clearTimeout(updatingTimerId.current)
}
wheelRef.current.removeAttribute('style')
const degrees = PROJECT_WHEEL_WIDTH * Math.round(Math.random() * 500)
spinnedDegrees.current += !spinnedDegrees.current
? degrees + FIRST_SPIN
: degrees
const styles = `transform: rotate(${spinnedDegrees.current}deg)`
let chosenProjectIndex =
((spinnedDegrees.current - FIRST_SPIN) / PROJECT_WHEEL_WIDTH) %
projectsInfo.length
updatingTimerId.current = window.setTimeout(() => {
updateChosenProject(chosenProjectIndex)
}, WHEEL_ANIMATION_SPINNING)
wheelRef.current.setAttribute('style', styles)
В своих тестах я пытаюсь проверить
- Что после клика у колеса появилось инлайн-стили с transform
- Что использовался setState для обновления выбранного проекта
test('should show hidden block after first spin', () => {
jest.useFakeTimers()
const component = mount(<Roulette layout="promo" />)
const button = component.find('PromoButton')
expect(button).toHaveLength(1)
button.simulate('click')
act(() => {
jest.runAllTimers()
})
const hiddenTextContainer = component.find({
'data-testid': 'text-container'
})
expect(component).toContain(hiddenTextContainer)
jest.useRealTimers()
})
test('should spin wheel', () => {
const component = mount(<Roulette layout="promo" />)
const button = component.find('PromoButton')
expect(button).toHaveLength(1)
act(() => {
button.simulate('click')
})
const wheel = component.find({'data-testid': 'wheel'})
expect(wheel).toHaveProperty('style')
})
Но тесты постоянно валятся. Я пробовал дебажить и в функцию onSpin тест поподает, но в самом тесте ничего не происходит. toHaveProperty вообще возвращает пустой массив. С тестами столкнулся первый раз, может есть у кого идеи почему не срабатывает тест? Спасибо
