Обработчик клика не изменяет атрибут стилей при тестировании 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)

В своих тестах я пытаюсь проверить

  1. Что после клика у колеса появилось инлайн-стили с transform
  2. Что использовался 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 вообще возвращает пустой массив. С тестами столкнулся первый раз, может есть у кого идеи почему не срабатывает тест? Спасибо введите сюда описание изображения


Ответы (0 шт):