diff --git a/src/packages/animatingnumbers/__tests__/animatingnumbers.spec.tsx b/src/packages/animatingnumbers/__tests__/animatingnumbers.spec.tsx
index f4f6e9eccabf433785696de3ad2241d7f5109427..64e25322a676544d27f2079dca93fb01e041ff02 100644
--- a/src/packages/animatingnumbers/__tests__/animatingnumbers.spec.tsx
+++ b/src/packages/animatingnumbers/__tests__/animatingnumbers.spec.tsx
@@ -2,11 +2,18 @@ import React from 'react'
import { render, waitFor } from '@testing-library/react'
import '@testing-library/jest-dom'
import { AnimatingNumbers } from '../animatingnumbers'
+import { CountUp } from '@/packages/animatingnumbers/countup'
+jest.useFakeTimers()
test('test endNumber props', () => {
const { container } = render()
const listNumbers = container.querySelectorAll('.nut-countup__number')
+ expect(listNumbers[0]).toHaveAttribute(
+ 'style',
+ 'transition: transform 1s ease-in-out;'
+ )
+ jest.advanceTimersByTime(CountUp.defaultProps?.delaySpeed ?? 0)
expect(listNumbers[0]).toHaveAttribute(
'style',
'transition: transform 1s ease-in-out; transform: translate(0, -30%); webkit-transform: translate(0, -30%);'
@@ -26,6 +33,7 @@ test('test aysnc endNumber and easeSpeed props', async () => {
)
const listNumbers = container.querySelectorAll('.nut-countup__number')
expect(listNumbers.length).toBe(8)
+ jest.advanceTimersByTime(CountUp.defaultProps?.delaySpeed ?? 0)
expect(listNumbers[0]).toHaveAttribute(
'style',
'transition: transform 1.2s ease-in-out; transform: translate(0, -50%); webkit-transform: translate(0, -50%);'
diff --git a/src/packages/animatingnumbers/countup.tsx b/src/packages/animatingnumbers/countup.tsx
index de8ad160ff8df8d0fa225423c1875b169bb76f23..6c815c282640542387595b64475f9024529f4821 100644
--- a/src/packages/animatingnumbers/countup.tsx
+++ b/src/packages/animatingnumbers/countup.tsx
@@ -2,6 +2,7 @@ import React, {
CSSProperties,
FunctionComponent,
useEffect,
+ useMemo,
useRef,
} from 'react'
@@ -54,7 +55,7 @@ export const CountUp: FunctionComponent> = (props) => {
return currNumber.split('')
}
- const numerArr = getShowNumber()
+ const numerArr = useMemo(getShowNumber, [endNumber, maxLen, thousands])
const setNumberTransform = () => {
if (countupRef.current) {
@@ -88,10 +89,6 @@ export const CountUp: FunctionComponent> = (props) => {
return () => {
window.clearTimeout(timerRef.current)
}
- }, [])
-
- useEffect(() => {
- setNumberTransform()
}, [numerArr])
return (