refactor(test-utils): add package for test utils (#256)

# Overview

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

I add new dev package @suspensive/test-utils to gather test-utils
resolve
#234 (comment)

## 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.

.changeset/real-hairs-provide.md

@@ -0,0 +1,6 @@
+---
+"@suspensive/react-await": patch
+"@suspensive/react": patch
+---
+
+refactor: add @suspensive/test-utils as dev dependency to remove unnecessary repetitive code

configs/test-utils/.eslintrc.cjs

@@ -0,0 +1,6 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['@suspensive/eslint-config/react-ts'],
+  ignorePatterns: ['*.js*', 'dist', 'coverage'],
+}

configs/test-utils/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@suspensive/test-utils",
+  "version": "0.0.0",
+  "private": true,
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/manudeli"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Jonghyeon Ko",
+    "email": "[email protected]"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "type:check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17 || ^18"
+  }
+}

packages/react-await/src/utils/toTest.tsx → configs/test-utils/src/Suspend.tsx

@@ -16,10 +16,3 @@ export const Suspend = ({ during, toShow }: SuspendProps) => {
 Suspend.reset = () => {
   suspendIsNeed.current = true
 }
-
-export const delay = (ms: number) => new Promise((resolve) => setTimeout(() => resolve('done'), ms))
-
-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

configs/test-utils/src/ThrowError.tsx

@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react'
+import { useEffect, useState } from 'react'
+
+const useSetTimeout = (fn: (...args: []) => void, delay: number) =>
+  useEffect(() => {
+    const timeout = setTimeout(fn, delay)
+    return () => clearTimeout(timeout)
+  }, [fn, delay])
+
+const throwErrorIsNeed = { current: false }
+type ThrowErrorProps = PropsWithChildren<{ message: string; after?: number }>
+export const ThrowError = ({ message, after = 0, children }: ThrowErrorProps) => {
+  const [isNeedError, setIsNeedError] = useState(after === 0 ? true : throwErrorIsNeed.current)
+  if (isNeedError) {
+    throw new Error(message)
+  }
+  useSetTimeout(() => setIsNeedError(true), after)
+  return <>{children}</>
+}
+
+type ThrowNullProps = PropsWithChildren<{ after: number }>
+export const ThrowNull = ({ after, children }: ThrowNullProps) => {
+  const [isNeedError, setIsNeedError] = useState(throwErrorIsNeed.current)
+  if (isNeedError) {
+    throw null
+  }
+  useSetTimeout(() => setIsNeedError(true), after)
+  return <>{children}</>
+}
+
+ThrowError.reset = () => {
+  throwErrorIsNeed.current = false
+}

configs/test-utils/src/delay.ts

@@ -0,0 +1 @@
+export const delay = (ms: number) => new Promise((resolve) => setTimeout(() => resolve('done'), ms))

configs/test-utils/src/index.ts

@@ -0,0 +1,7 @@
+export { Suspend } from './Suspend'
+export { ThrowError, ThrowNull } from './ThrowError'
+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

configs/test-utils/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@suspensive/tsconfig/react-library.json",
+  "include": ["."],
+  "compilerOptions": {
+    "types": ["@testing-library/jest-dom"]
+  }
+}

packages/react-await/package.json

@@ -60,6 +60,7 @@
   },
   "devDependencies": {
     "@suspensive/react": "workspace:*",
+    "@suspensive/test-utils": "workspace:*",
     "@suspensive/tsup": "workspace:*",
     "@suspensive/vitest": "workspace:*",
     "@types/node": "^18.16.2",

packages/react-await/src/Await.spec.tsx

@@ -1,7 +1,7 @@
 import { ErrorBoundary, Suspense } from '@suspensive/react'
+import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, delay } from '@suspensive/test-utils'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
-import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, delay } from './utils/toTest'
 import { Await, awaitClient, useAwait } from '.'
 
 const key = (id: number) => ['key', id] as const

packages/react/package.json

@@ -56,6 +56,7 @@
     "type:check": "tsc --noEmit"
   },
   "devDependencies": {
+    "@suspensive/test-utils": "workspace:*",
     "@suspensive/tsup": "workspace:*",
     "@suspensive/vitest": "workspace:*",
     "@types/node": "^18.16.2",

packages/react/src/AsyncBoundary.spec.tsx

@@ -1,9 +1,9 @@
+import { ERROR_MESSAGE, FALLBACK, MS_100, Suspend, TEXT, ThrowError } from '@suspensive/test-utils'
 import { act, render, waitFor } from '@testing-library/react'
 import type { ComponentProps } from 'react'
 import { createElement } from 'react'
 import { createRoot } from 'react-dom/client'
 import { vi } from 'vitest'
-import { ERROR_MESSAGE, FALLBACK, MS_100, Suspend, TEXT, ThrowError } from './utils/toTest'
 import { AsyncBoundary, withAsyncBoundary } from '.'
 
 let container = document.createElement('div')

packages/react/src/Delay.spec.tsx

@@ -1,6 +1,6 @@
+import { MS_100, TEXT } from '@suspensive/test-utils'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
-import { MS_100, TEXT } from './utils/toTest'
 import { Delay, withDelay } from '.'
 
 describe('<Delay/>', () => {

packages/react/src/ErrorBoundary.spec.tsx

@@ -1,11 +1,11 @@
+import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, ThrowError, ThrowNull } from '@suspensive/test-utils'
 import { act, render } from '@testing-library/react'
 import type { ComponentProps, ComponentRef } from 'react'
 import { createElement, createRef } from 'react'
 import { createRoot } from 'react-dom/client'
 import { vi } from 'vitest'
 import { useSetTimeout } from './hooks'
 import { assert } from './utils'
-import { ERROR_MESSAGE, FALLBACK, MS_100, TEXT, ThrowError, ThrowNull } from './utils/toTest'
 import { ErrorBoundary, useErrorBoundary, useErrorBoundaryFallbackProps, withErrorBoundary } from '.'
 
 let container = document.createElement('div')

packages/react/src/ErrorBoundaryGroup.spec.tsx

@@ -1,8 +1,8 @@
+import { ERROR_MESSAGE, MS_100, TEXT, ThrowError } from '@suspensive/test-utils'
 import { act, render, screen } from '@testing-library/react'
 import { createElement } from 'react'
 import { vi } from 'vitest'
 import { assert } from './utils'
-import { ERROR_MESSAGE, MS_100, TEXT, ThrowError } from './utils/toTest'
 import { ErrorBoundary, ErrorBoundaryGroup, useErrorBoundaryGroup, withErrorBoundaryGroup } from '.'
 
 const innerErrorBoundaryCount = 3

packages/react/src/Suspense.spec.tsx

@@ -1,7 +1,7 @@
+import { FALLBACK, MS_100, Suspend, TEXT } from '@suspensive/test-utils'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import { createElement } from 'react'
 import { vi } from 'vitest'
-import { FALLBACK, MS_100, Suspend, TEXT } from './utils/toTest'
 import { Suspense, withSuspense } from '.'
 
 describe('<Suspense/>', () => {

packages/react/src/SuspensiveProvider.spec.tsx

@@ -1,6 +1,6 @@
+import { FALLBACK, MS_100, Suspend, TEXT } from '@suspensive/test-utils'
 import { act, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
-import { FALLBACK, MS_100, Suspend, TEXT } from './utils/toTest'
 import { Delay, Suspense, Suspensive, SuspensiveProvider } from '.'
 
 const FALLBACK_GLOBAL = 'FALLBACK_GLOBAL'

packages/react/src/hooks/useSetTimeout.spec.ts

@@ -1,6 +1,6 @@
+import { MS_100 } from '@suspensive/test-utils'
 import { act, renderHook } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
-import { MS_100 } from '../utils/toTest'
 import { useSetTimeout } from '.'
 
 vi.useFakeTimers()

turbo.json

@@ -5,9 +5,9 @@
     "build:watch": { "outputs": ["dist/**"] },
     "npm:publish": { "dependsOn": ["^build"] },
     "lint": { "cache": false },
-    "lint:attw": { "dependsOn": ["^build"], "cache": false  },
+    "lint:attw": { "dependsOn": ["^build"], "cache": false },
     "lint:pub": { "cache": false },
-    "test": { "outputs": ["coverage/**"], "cache": false },
+    "test": { "dependsOn": ["^build"], "outputs": ["coverage/**"], "cache": false },
     "test:tsd": {},
     "test:watch": { "cache": false },
     "prepack": { "dependsOn": ["^prepack"], "cache": false },