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
#264 (comment)
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

@@ -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

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",

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)

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)

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

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,15 +38,15 @@ describe('<ErrorBoundary/>', () => {
       onError,
       fallback: <>{FALLBACK}</>,
       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(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,24 +321,24 @@ 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>
       ),
     })
     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)