javascript - 点击按钮事件不会改变酶测试中的属性

Question

我有一个组件，我有另一个组件按钮，带有点击处理。这是我的主要组件的示例。

<div className={styles.roulette}>
  {chosenProjectElement}
  <div className={styles.action}>
    <PromoButton
      caption={chosenProject ? 'Давай еще' : 'Покажи мне'}
      onClick={onSpin}
      size={isMobile ? 'small' : 'default'}
      color={theme === 'simpsons' ? 'yellow' : 'orange'}
    />
    {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

if (isMobile) chosenProjectIndex = chosenProjectIndex - 4

updatingTimerId.current = window.setTimeout(() => {
  updateChosenProject(chosenProjectIndex)
}, WHEEL_ANIMATION_SPINNING)

wheelRef.current.setAttribute('style', styles)

}, [isMobile])

当我点击按钮时，会发生两件事。首先我的轮子旋转，超时后显示带有测试的隐藏块。我正在尝试测试此事件。

这是我的测试：

describe('<Roulette />', () => {
  test('should render Roulette component', () => {
    const component = shallow(<Roulette layout="promo" />)
    expect(toJson(component)).toMatchSnapshot()
  })

  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')
  })

我第一次面对考验。你能帮我看看哪里错了吗？

标签： javascriptunit-testingtestingjestjsenzyme