From 3923505c06beec59c59bc8bfc3b4b8b58131b09e Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Sun, 29 Oct 2023 18:43:05 +0900
Subject: [PATCH] chore(ms): add dev dependency (#274)

fix #267

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

@minsoo-web suggest us to add `ms` in
https://github.com/suspensive/react/pull/264#discussion_r1373407757
I added `ms` as dev dependency to test apis related with time

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
---
 configs/test-utils/src/index.ts               |  1 -
 package.json                                  |  1 +
 packages/react-await/src/Await.spec.tsx       | 19 +++----
 packages/react/src/AsyncBoundary.spec.tsx     | 11 +++--
 packages/react/src/Delay.spec.tsx             | 11 +++--
 packages/react/src/ErrorBoundary.spec.tsx     | 49 ++++++++++---------
 .../react/src/ErrorBoundaryGroup.spec.tsx     | 11 +++--
 packages/react/src/Suspense.spec.tsx          | 19 +++----
 .../react/src/SuspensiveProvider.spec.tsx     |  7 +--
 packages/react/src/hooks/useTimeout.spec.tsx  | 16 +++---
 pnpm-lock.yaml                                | 49 +++++--------------
 11 files changed, 89 insertions(+), 105 deletions(-)

diff --git a/configs/test-utils/src/index.ts b/configs/test-utils/src/index.ts
index d4b8e7837..4321dec1b 100644
--- a/configs/test-utils/src/index.ts
+++ b/configs/test-utils/src/index.ts
@@ -4,4 +4,3 @@ export { delay } from './delay'
 export const TEXT = 'TEXT' as const
 export const ERROR_MESSAGE = 'ERROR_MESSAGE' as const
 export const FALLBACK = 'FALLBACK' as const
-export const MS_100 = 100 as const
diff --git a/package.json b/package.json
index c5b208353..c400bcab8 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
     "lint-staged": "^13.2.2",
+    "ms": "^3.0.0-canary.1",
     "packlint": "^0.2.4",
     "prettier": "^2.8.8",
     "publint": "^0.2.2",
diff --git a/packages/react-await/src/Await.spec.tsx b/packages/react-await/src/Await.spec.tsx
index 5837b89ea..bf604c190 100644
--- a/packages/react-await/src/Await.spec.tsx
+++ b/packages/react-await/src/Await.spec.tsx
@@ -1,13 +1,14 @@
 import { ErrorBoundary, Suspense } from '@suspensive/react'
-import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, delay } from '@suspensive/test-utils'
+import { ERROR_MESSAGE, FALLBACK, TEXT, delay } from '@suspensive/test-utils'
 import { act, render, screen, waitFor } from '@testing-library/react'
+import ms from 'ms'
 import { vi } from 'vitest'
 import { Await, awaitClient, useAwait } from '.'
 
 const key = (id: number) => ['key', id] as const
 
 const AwaitSuccess = () => {
-  const awaited = useAwait({ key: key(1), fn: () => delay(MS_100).then(() => TEXT) })
+  const awaited = useAwait({ key: key(1), fn: () => delay(ms('0.1s')).then(() => TEXT) })
 
   return (
     <>
@@ -20,7 +21,7 @@ const AwaitSuccess = () => {
 const AwaitFailure = () => {
   const awaited = useAwait({
     key: key(1),
-    fn: () => delay(MS_100).then(() => Promise.reject(new Error(ERROR_MESSAGE))),
+    fn: () => delay(ms('0.1s')).then(() => Promise.reject(new Error(ERROR_MESSAGE))),
   })
 
   return <>{awaited.data}</>
@@ -49,7 +50,7 @@ describe('useAwait', () => {
     )
     expect(screen.queryByText(FALLBACK)).toBeInTheDocument()
 
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
 
     // success data cache test
@@ -73,7 +74,7 @@ describe('useAwait', () => {
       </ErrorBoundary>
     )
     expect(screen.queryByText(FALLBACK)).toBeInTheDocument()
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(ERROR_MESSAGE)).toBeInTheDocument())
 
     // error cache test
@@ -97,7 +98,7 @@ describe('useAwait', () => {
       </Suspense>
     )
     expect(screen.queryByText(FALLBACK)).toBeInTheDocument()
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
     const resetButton = await screen.findByRole('button', { name: 'Try again' })
     resetButton.click()
@@ -107,7 +108,7 @@ describe('useAwait', () => {
       </Suspense>
     )
     expect(screen.queryByText(FALLBACK)).toBeInTheDocument()
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
   })
 })
@@ -187,7 +188,7 @@ describe('awaitClient', () => {
     vi.useFakeTimers()
     render(
       <Suspense fallback={FALLBACK}>
-        <Await options={{ key: key(1), fn: () => delay(MS_100).then(() => TEXT) }}>
+        <Await options={{ key: key(1), fn: () => delay(ms('0.1s')).then(() => TEXT) }}>
           {(awaited) => <>{awaited.data}</>}
         </Await>
       </Suspense>
@@ -196,7 +197,7 @@ describe('awaitClient', () => {
     expect(screen.queryByText(FALLBACK)).toBeInTheDocument()
     expect(screen.queryByText(TEXT)).not.toBeInTheDocument()
     expect(awaitClient.getData(key(1))).toBeUndefined()
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
     expect(screen.queryByText(FALLBACK)).not.toBeInTheDocument()
     expect(awaitClient.getData(key(1))).toBe(TEXT)
diff --git a/packages/react/src/AsyncBoundary.spec.tsx b/packages/react/src/AsyncBoundary.spec.tsx
index 5cf5e017b..d5777777e 100644
--- a/packages/react/src/AsyncBoundary.spec.tsx
+++ b/packages/react/src/AsyncBoundary.spec.tsx
@@ -1,5 +1,6 @@
-import { ERROR_MESSAGE, FALLBACK, MS_100, Suspend, TEXT, ThrowError } from '@suspensive/test-utils'
+import { ERROR_MESSAGE, FALLBACK, Suspend, TEXT, ThrowError } from '@suspensive/test-utils'
 import { act, render, waitFor } from '@testing-library/react'
+import ms from 'ms'
 import type { ComponentProps } from 'react'
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
@@ -56,7 +57,7 @@ describe('<AsyncBoundary/>', () => {
       rejectedFallback: ERROR_MESSAGE,
       onError,
       children: (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
@@ -65,7 +66,7 @@ describe('<AsyncBoundary/>', () => {
     expect(container.textContent).not.toBe(FALLBACK)
     expect(container.textContent).not.toBe(ERROR_MESSAGE)
     expect(onError).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => {
       expect(container.textContent).toBe(ERROR_MESSAGE)
       expect(container.textContent).not.toBe(TEXT)
@@ -116,7 +117,7 @@ describe('<AsyncBoundary.CSROnly/>', () => {
       rejectedFallback: ERROR_MESSAGE,
       onError,
       children: (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
@@ -125,7 +126,7 @@ describe('<AsyncBoundary.CSROnly/>', () => {
     expect(container.textContent).not.toBe(FALLBACK)
     expect(container.textContent).not.toBe(ERROR_MESSAGE)
     expect(onError).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => {
       expect(container.textContent).toBe(ERROR_MESSAGE)
       expect(container.textContent).not.toBe(TEXT)
diff --git a/packages/react/src/Delay.spec.tsx b/packages/react/src/Delay.spec.tsx
index c24da63c5..c5cdebdac 100644
--- a/packages/react/src/Delay.spec.tsx
+++ b/packages/react/src/Delay.spec.tsx
@@ -1,14 +1,15 @@
-import { MS_100, TEXT } from '@suspensive/test-utils'
+import { TEXT } from '@suspensive/test-utils'
 import { act, render, screen, waitFor } from '@testing-library/react'
+import ms from 'ms'
 import { vi } from 'vitest'
 import { Delay, withDelay } from '.'
 
 describe('<Delay/>', () => {
   it('should render the children after the delay', async () => {
     vi.useFakeTimers()
-    render(<Delay ms={MS_100}>{TEXT}</Delay>)
+    render(<Delay ms={ms('0.1s')}>{TEXT}</Delay>)
     expect(screen.queryByText(TEXT)).not.toBeInTheDocument()
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
   })
   it('should render the children directly if no ms prop', () => {
@@ -17,14 +18,14 @@ describe('<Delay/>', () => {
   })
 })
 
-const TEXTAfterDelay100ms = withDelay(() => <>{TEXT}</>, { ms: MS_100 })
+const TEXTAfterDelay100ms = withDelay(() => <>{TEXT}</>, { ms: ms('0.1s') })
 
 describe('withDelay', () => {
   it('renders the children after the delay with component', async () => {
     vi.useFakeTimers()
     render(<TEXTAfterDelay100ms />)
     expect(screen.queryByText(TEXT)).not.toBeInTheDocument()
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
   })
 
diff --git a/packages/react/src/ErrorBoundary.spec.tsx b/packages/react/src/ErrorBoundary.spec.tsx
index c5a2d18ff..54148ff87 100644
--- a/packages/react/src/ErrorBoundary.spec.tsx
+++ b/packages/react/src/ErrorBoundary.spec.tsx
@@ -1,5 +1,6 @@
-import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, ThrowError, ThrowNull } from '@suspensive/test-utils'
+import { ERROR_MESSAGE, FALLBACK, TEXT, ThrowError, ThrowNull } from '@suspensive/test-utils'
 import { act, render } from '@testing-library/react'
+import ms from 'ms'
 import type { ComponentProps, ComponentRef } from 'react'
 import { createElement, createRef } from 'react'
 import { createRoot } from 'react-dom/client'
@@ -37,7 +38,7 @@ describe('<ErrorBoundary/>', () => {
       onError,
       fallback: <>{FALLBACK}</>,
       children: (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
@@ -45,7 +46,7 @@ describe('<ErrorBoundary/>', () => {
     expect(container.textContent).toBe(TEXT)
     expect(container.textContent).not.toBe(FALLBACK)
     expect(onError).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(FALLBACK)
     expect(container.textContent).not.toBe(TEXT)
     expect(onError).toHaveBeenCalledTimes(1)
@@ -56,14 +57,14 @@ describe('<ErrorBoundary/>', () => {
     renderErrorBoundary({
       fallback: (props) => <>{props.error.message}</>,
       children: (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
     })
     expect(container.textContent).toBe(TEXT)
     expect(container.textContent).not.toBe(ERROR_MESSAGE)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(ERROR_MESSAGE)
     expect(container.textContent).not.toBe(TEXT)
   })
@@ -74,12 +75,12 @@ describe('<ErrorBoundary/>', () => {
     renderErrorBoundary({
       onError,
       fallback: <>{FALLBACK}</>,
-      children: <ThrowNull after={MS_100}>{TEXT}</ThrowNull>,
+      children: <ThrowNull after={ms('0.1s')}>{TEXT}</ThrowNull>,
     })
     expect(container.textContent).toBe(TEXT)
     expect(container.textContent).not.toBe(FALLBACK)
     expect(onError).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(FALLBACK)
     expect(container.textContent).not.toBe(TEXT)
     expect(onError).toHaveBeenCalledTimes(1)
@@ -92,13 +93,13 @@ describe('<ErrorBoundary/>', () => {
     renderErrorBoundary({
       resetKeys: [0],
       children: (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
       onReset,
     })
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(ERROR_MESSAGE)
     expect(container.textContent).not.toBe(TEXT)
     expect(onReset).toHaveBeenCalledTimes(0)
@@ -114,13 +115,13 @@ describe('<ErrorBoundary/>', () => {
     renderErrorBoundary({
       resetKeys: [0],
       children: (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
       onReset,
     })
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(ERROR_MESSAGE)
     expect(container.textContent).not.toBe(TEXT)
 
@@ -139,13 +140,13 @@ describe('<ErrorBoundary/>', () => {
     act(() =>
       root.render(
         <ErrorBoundary ref={errorBoundaryRef} fallback={fallbackFn} onReset={onReset}>
-          <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+          <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
             {TEXT}
           </ThrowError>
         </ErrorBoundary>
       )
     )
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(fallbackFn).toHaveBeenCalled()
     fallbackFn.mock.calls[0][0].reset()
     expect(onReset).toHaveBeenCalledTimes(1)
@@ -156,13 +157,13 @@ describe('<ErrorBoundary/>', () => {
     vi.useFakeTimers()
     renderErrorBoundary({
       children: (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
       onReset,
     })
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(ERROR_MESSAGE)
     expect(container.textContent).not.toBe(TEXT)
     expect(onReset).toHaveBeenCalledTimes(0)
@@ -206,7 +207,7 @@ describe('withErrorBoundary', () => {
 
     const WrappedComponentWithError = withErrorBoundary(
       () => (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
@@ -217,7 +218,7 @@ describe('withErrorBoundary', () => {
 
     act(() => root.render(<WrappedComponentWithError />))
     expect(container.textContent).toBe(TEXT)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(ERROR_MESSAGE)
   })
 
@@ -257,19 +258,19 @@ describe('useErrorBoundary', () => {
       onError,
       fallback: function ErrorBoundaryFallback() {
         const props = useErrorBoundaryFallbackProps()
-        useTimeout(props.reset, MS_100)
+        useTimeout(props.reset, ms('0.1s'))
         return <>{props.error.message}</>
       },
       children: createElement(() => {
         const errorBoundary = useErrorBoundary()
-        useTimeout(() => errorBoundary.setError(new Error(ERROR_MESSAGE)), MS_100)
+        useTimeout(() => errorBoundary.setError(new Error(ERROR_MESSAGE)), ms('0.1s'))
         return <>{TEXT}</>
       }),
     })
     expect(container.textContent).toBe(TEXT)
     expect(container.textContent).not.toBe(ERROR_MESSAGE)
     expect(onError).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(ERROR_MESSAGE)
     expect(container.textContent).not.toBe(TEXT)
     expect(onError).toHaveBeenCalledTimes(1)
@@ -320,12 +321,12 @@ describe('useErrorBoundaryFallbackProps', () => {
       onReset,
       fallback: function ErrorBoundaryFallback() {
         const props = useErrorBoundaryFallbackProps()
-        useTimeout(props.reset, MS_100)
+        useTimeout(props.reset, ms('0.1s'))
 
         return <>{props.error.message}</>
       },
       children: (
-        <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+        <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
           {TEXT}
         </ThrowError>
       ),
@@ -333,11 +334,11 @@ describe('useErrorBoundaryFallbackProps', () => {
     expect(container.textContent).toBe(TEXT)
     expect(container.textContent).not.toBe(ERROR_MESSAGE)
     expect(onReset).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(ERROR_MESSAGE)
     expect(container.textContent).not.toBe(TEXT)
     expect(onReset).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(container.textContent).toBe(TEXT)
     expect(container.textContent).not.toBe(ERROR_MESSAGE)
     expect(onReset).toHaveBeenCalledTimes(1)
diff --git a/packages/react/src/ErrorBoundaryGroup.spec.tsx b/packages/react/src/ErrorBoundaryGroup.spec.tsx
index 3bf0d7221..be5a7e777 100644
--- a/packages/react/src/ErrorBoundaryGroup.spec.tsx
+++ b/packages/react/src/ErrorBoundaryGroup.spec.tsx
@@ -1,5 +1,6 @@
-import { ERROR_MESSAGE, MS_100, TEXT, ThrowError } from '@suspensive/test-utils'
+import { ERROR_MESSAGE, TEXT, ThrowError } from '@suspensive/test-utils'
 import { act, render, screen } from '@testing-library/react'
+import ms from 'ms'
 import { createElement } from 'react'
 import { vi } from 'vitest'
 import { assert } from './utils'
@@ -16,7 +17,7 @@ describe('<ErrorBoundaryGroup/>', () => {
         <ErrorBoundaryGroup.Reset trigger={(group) => <button onClick={group.reset}>{resetButtonText}</button>} />
         {Array.from({ length: innerErrorBoundaryCount }).map((_, key) => (
           <ErrorBoundary key={key} fallback={(props) => <div>{props.error.message}</div>}>
-            <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+            <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
               <div>{TEXT}</div>
             </ThrowError>
           </ErrorBoundary>
@@ -25,7 +26,7 @@ describe('<ErrorBoundaryGroup/>', () => {
     )
 
     expect(screen.getAllByText(TEXT).length).toBe(innerErrorBoundaryCount)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(screen.getAllByText(ERROR_MESSAGE).length).toBe(innerErrorBoundaryCount)
 
     const resetButton = screen.getByRole('button', { name: resetButtonText })
@@ -45,7 +46,7 @@ describe('<ErrorBoundaryGroup/>', () => {
         {Array.from({ length: innerErrorBoundaryCount }).map((_, index) => (
           <ErrorBoundaryGroup key={index} blockOutside={index === innerErrorBoundaryCount - 1}>
             <ErrorBoundary fallback={(props) => <div>{props.error.message}</div>}>
-              <ThrowError message={ERROR_MESSAGE} after={MS_100}>
+              <ThrowError message={ERROR_MESSAGE} after={ms('0.1s')}>
                 <div>{TEXT}</div>
               </ThrowError>
             </ErrorBoundary>
@@ -55,7 +56,7 @@ describe('<ErrorBoundaryGroup/>', () => {
     )
 
     expect(screen.getAllByText(TEXT).length).toBe(innerErrorBoundaryCount)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(screen.getAllByText(ERROR_MESSAGE).length).toBe(innerErrorBoundaryCount)
 
     const resetButton = screen.getByRole('button', { name: resetButtonText })
diff --git a/packages/react/src/Suspense.spec.tsx b/packages/react/src/Suspense.spec.tsx
index 129141ed2..327807326 100644
--- a/packages/react/src/Suspense.spec.tsx
+++ b/packages/react/src/Suspense.spec.tsx
@@ -1,5 +1,6 @@
-import { FALLBACK, MS_100, Suspend, TEXT } from '@suspensive/test-utils'
+import { FALLBACK, Suspend, TEXT } from '@suspensive/test-utils'
 import { act, render, screen, waitFor } from '@testing-library/react'
+import ms from 'ms'
 import { createElement } from 'react'
 import { vi } from 'vitest'
 import { Suspense, withSuspense } from '.'
@@ -25,11 +26,11 @@ describe('<Suspense/>', () => {
     vi.useFakeTimers()
     render(
       <Suspense>
-        <Suspend during={MS_100} toShow={TEXT} />
+        <Suspend during={ms('0.1s')} toShow={TEXT} />
       </Suspense>
     )
     expect(screen.queryByText(TEXT)).not.toBeInTheDocument()
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
   })
 })
@@ -49,10 +50,10 @@ describe('<Suspense.CSROnly/>', () => {
     vi.useFakeTimers()
     render(
       <Suspense.CSROnly fallback={FALLBACK}>
-        <Suspend during={MS_100} toShow={TEXT} />
+        <Suspend during={ms('0.1s')} toShow={TEXT} />
       </Suspense.CSROnly>
     )
-    vi.advanceTimersByTime(MS_100)
+    vi.advanceTimersByTime(ms('0.1s'))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
     expect(screen.queryByText(FALLBACK)).not.toBeInTheDocument()
   })
@@ -70,14 +71,14 @@ describe('withSuspense', () => {
     vi.useFakeTimers()
     render(
       createElement(
-        withSuspense(() => <Suspend during={MS_100} toShow={TEXT} />, {
+        withSuspense(() => <Suspend during={ms('0.1s')} toShow={TEXT} />, {
           fallback: FALLBACK,
         })
       )
     )
     expect(screen.queryByText(FALLBACK)).toBeInTheDocument()
     expect(screen.queryByText(TEXT)).not.toBeInTheDocument()
-    vi.advanceTimersByTime(MS_100)
+    vi.advanceTimersByTime(ms('0.1s'))
     await waitFor(() => expect(screen.queryByText(FALLBACK)).not.toBeInTheDocument())
     expect(screen.queryByText(TEXT)).toBeInTheDocument()
     expect(screen.queryByText(FALLBACK)).not.toBeInTheDocument()
@@ -97,14 +98,14 @@ describe('withSuspense.CSROnly', () => {
     vi.useFakeTimers()
     render(
       createElement(
-        withSuspense.CSROnly(() => <Suspend during={MS_100} toShow={TEXT} />, {
+        withSuspense.CSROnly(() => <Suspend during={ms('0.1s')} toShow={TEXT} />, {
           fallback: FALLBACK,
         })
       )
     )
     expect(screen.queryByText(FALLBACK)).toBeInTheDocument()
     expect(screen.queryByText(TEXT)).not.toBeInTheDocument()
-    vi.advanceTimersByTime(MS_100)
+    vi.advanceTimersByTime(ms('0.1s'))
     await waitFor(() => expect(screen.queryByText(FALLBACK)).not.toBeInTheDocument())
     expect(screen.queryByText(TEXT)).toBeInTheDocument()
     expect(screen.queryByText(FALLBACK)).not.toBeInTheDocument()
diff --git a/packages/react/src/SuspensiveProvider.spec.tsx b/packages/react/src/SuspensiveProvider.spec.tsx
index 683e70cd4..6d898e0af 100644
--- a/packages/react/src/SuspensiveProvider.spec.tsx
+++ b/packages/react/src/SuspensiveProvider.spec.tsx
@@ -1,5 +1,6 @@
-import { FALLBACK, MS_100, Suspend, TEXT } from '@suspensive/test-utils'
+import { FALLBACK, Suspend, TEXT } from '@suspensive/test-utils'
 import { act, render, screen, waitFor } from '@testing-library/react'
+import ms from 'ms'
 import { vi } from 'vitest'
 import { Delay, Suspense, Suspensive, SuspensiveProvider } from '.'
 
@@ -9,12 +10,12 @@ describe('<SuspensiveProvider/>', () => {
   it('should provide default ms prop of Delay', async () => {
     vi.useFakeTimers()
     render(
-      <SuspensiveProvider value={new Suspensive({ defaultOptions: { delay: { ms: MS_100 } } })}>
+      <SuspensiveProvider value={new Suspensive({ defaultOptions: { delay: { ms: ms('0.1s') } } })}>
         <Delay>{TEXT}</Delay>
       </SuspensiveProvider>
     )
     expect(screen.queryByText(TEXT)).not.toBeInTheDocument()
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     await waitFor(() => expect(screen.queryByText(TEXT)).toBeInTheDocument())
   })
   it('should accept suspensive value with nothing about Delay', () => {
diff --git a/packages/react/src/hooks/useTimeout.spec.tsx b/packages/react/src/hooks/useTimeout.spec.tsx
index 85f57032c..139a7c0f7 100644
--- a/packages/react/src/hooks/useTimeout.spec.tsx
+++ b/packages/react/src/hooks/useTimeout.spec.tsx
@@ -1,5 +1,5 @@
-import { MS_100 } from '@suspensive/test-utils'
 import { act, render, renderHook, screen } from '@testing-library/react'
+import ms from 'ms'
 import { useState } from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import { useTimeout } from '.'
@@ -11,7 +11,7 @@ const TestComponent = () => {
 
   useTimeout(() => {
     setNumber(number + 1)
-  }, MS_100)
+  }, ms('0.1s'))
 
   return <div>{number}</div>
 }
@@ -19,15 +19,15 @@ const TestComponent = () => {
 describe('useTimeout', () => {
   it('should run given function once after given timeout', () => {
     const fn = vi.fn()
-    const rendered = renderHook(() => useTimeout(fn, MS_100))
+    const rendered = renderHook(() => useTimeout(fn, ms('0.1s')))
     expect(fn).toHaveBeenCalledTimes(0)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(fn).toHaveBeenCalledTimes(1)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(fn).toHaveBeenCalledTimes(1)
     rendered.rerender()
     expect(fn).toHaveBeenCalledTimes(1)
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(fn).toHaveBeenCalledTimes(1)
   })
 
@@ -36,12 +36,12 @@ describe('useTimeout', () => {
 
     expect(screen.getByText('0')).toBeInTheDocument()
 
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(screen.getByText('1')).toBeInTheDocument()
 
     rerender(<TestComponent />)
 
-    act(() => vi.advanceTimersByTime(MS_100))
+    act(() => vi.advanceTimersByTime(ms('0.1s')))
     expect(screen.getByText('1')).toBeInTheDocument()
   })
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bb2b6b4c0..58076f80b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,6 +64,9 @@ importers:
       lint-staged:
         specifier: ^13.2.2
         version: 13.2.2
+      ms:
+        specifier: ^3.0.0-canary.1
+        version: 3.0.0-canary.1
       packlint:
         specifier: ^0.2.4
         version: 0.2.4(typanion@3.12.1)
@@ -768,7 +771,7 @@ packages:
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
       resolve-from: 5.0.0
-      ts-node: 10.9.1(@types/node@20.0.0)(typescript@5.2.2)
+      ts-node: 10.9.1(@types/node@20.0.0)(typescript@5.1.6)
       typescript: 5.2.2
     transitivePeerDependencies:
       - '@swc/core'
@@ -1941,7 +1944,7 @@ packages:
   /@types/debug@4.1.8:
     resolution: {integrity: sha512-/vPO1EPOs306Cvhwv7KfVfYvOJqA/S/AXjaHQiJboCZzcNDb+TIJFN9/2C9DZ//ijSKWioNyUxD792QmDJ+HKQ==}
     dependencies:
-      '@types/ms': 0.7.31
+      '@types/ms': 0.7.33
     dev: false
 
   /@types/eslint@7.29.0:
@@ -2035,8 +2038,8 @@ packages:
     resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
     dev: true
 
-  /@types/ms@0.7.31:
-    resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}
+  /@types/ms@0.7.33:
+    resolution: {integrity: sha512-AuHIyzR5Hea7ij0P9q7vx7xu4z0C28ucwjAZC0ja7JhINyCnOw8/DnvAPQQ9TfOlCtZAmCERKQX9+o1mgQhuOQ==}
     dev: false
 
   /@types/node@12.20.55:
@@ -3327,7 +3330,7 @@ packages:
     dependencies:
       '@types/node': 20.0.0
       cosmiconfig: 8.1.3
-      ts-node: 10.9.1(@types/node@20.0.0)(typescript@5.2.2)
+      ts-node: 10.9.1(@types/node@20.0.0)(typescript@5.1.6)
       typescript: 5.2.2
     dev: true
 
@@ -7445,6 +7448,11 @@ packages:
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  /ms@3.0.0-canary.1:
+    resolution: {integrity: sha512-kh8ARjh8rMN7Du2igDRO9QJnqCb2xYTJxyQYK7vJJS4TvLLmsbyhiKpSW+t+y26gyOyMd0riphX0GeWKU3ky5g==}
+    engines: {node: '>=12.13'}
+    dev: true
+
   /mute-stream@0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
     dev: true
@@ -9472,37 +9480,6 @@ packages:
       yn: 3.1.1
     dev: true
 
-  /ts-node@10.9.1(@types/node@20.0.0)(typescript@5.2.2):
-    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.9
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.0.0
-      acorn: 8.8.2
-      acorn-walk: 8.2.0
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.2.2
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
-    dev: true
-
   /ts-toolbelt@6.15.5:
     resolution: {integrity: sha512-FZIXf1ksVyLcfr7M317jbB67XFJhOO1YqdTcuGaq9q5jLUoTikukZ+98TPjKiP2jC5CgmYdWWYs0s2nLSU0/1A==}
     dev: true