Started experimenting with @testing-library/react

glyph-cat · May 31, 2024 · ea74a61 · ea74a61
1 parent 708bf19
commit ea74a61
Show file tree

Hide file tree

Showing 16 changed files with 610 additions and 48 deletions.
diff --git a/packages/react/jest.config.ts b/packages/react/jest.config.ts
@@ -1,13 +1,17 @@
 import { Config } from '@jest/types'
 
 const config: Config.InitialOptions = {
+  setupFiles: [
+    '<rootDir>/jest.pre-env-setup.ts',
+  ],
   setupFilesAfterEnv: [
-    '<rootDir>/jest.setup.ts',
+    '<rootDir>/jest.post-env-setup.ts',
   ],
   testPathIgnorePatterns: [
     '.draft',
     '.old',
   ],
+  testEnvironment: 'jsdom',
   testTimeout: 1000,
   fakeTimers: {
     enableGlobally: true,

diff --git a/packages/react/jest.setup.ts → packages/react/jest.post-env-setup.ts b/packages/react/jest.setup.ts → packages/react/jest.post-env-setup.ts
diff --git a/packages/react/jest.pre-env-setup.ts b/packages/react/jest.pre-env-setup.ts
@@ -0,0 +1,9 @@
+import { TextEncoder, TextDecoder } from 'util'
+
+Object.assign(global, { TextDecoder, TextEncoder })
+
+// References:
+// - Why am I getting "TextEncoder is not defined" in Jest?
+//   https://stackoverflow.com/a/68468204/5810737
+// - Typescript with Jest - "ReferenceError: beforeAll is not defined"
+//   https://stackoverflow.com/a/69169372/5810737
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -49,6 +49,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/react": "^15.0.7",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.8",
     "@types/react": "^18.3.1",
@@ -62,6 +63,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "process": "^0.11.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/packages/react/tests/api/useInitState/index.test.tsx b/packages/react/tests/api/useInitState/index.test.tsx
@@ -1,3 +1,4 @@
+import { act } from 'react'
 import { CleanupManager, HookInterface, TestUtils } from '../../test-helpers'
 import { TestConfig, wrapper } from '../../test-wrapper'
 
@@ -18,6 +19,7 @@ wrapper(({
   } as const
 
   for (const StateManagerTypeKey in stateManagersToTestWith) {
+
     const StateManagerType = stateManagersToTestWith[StateManagerTypeKey]
     test(StateManagerTypeKey, async () => {
 
@@ -52,9 +54,9 @@ wrapper(({
       await hookInterface.action('completeFirstInit')
       expect(hookInterface.get('isInitializing')).toBe(false)
 
-      const initAgainPromise = hookInterface.action('initAgain')
+      hookInterface.actionSync('initAgain')
       expect(hookInterface.get('isInitializing')).toBe(true)
-      await initAgainPromise
+      await act(async () => { await TestUtils.delay(10) })
       expect(hookInterface.get('isInitializing')).toBe(false)
 
     })

diff --git a/packages/react/tests/api/useSimpleStateValue/client-active-flag/with-selector.test.tsx b/packages/react/tests/api/useSimpleStateValue/client-active-flag/with-selector.test.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { CleanupManager, HookInterface } from '../../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface } from '../../../test-helpers'
 import { TestConfig, wrapper } from '../../../test-wrapper'
 
 wrapper(({
@@ -23,7 +23,7 @@ wrapper(({
       test(flagScenario, () => {
         const TestState = new SimpleStateManager(42)
         cleanupManager.append(TestState.dispose)
-        const hookInterface = new HookInterface({
+        const hookInterface = new UNSAFE_HookInterface({
           cleanupManager,
           useHook: () => useHook(TestState),
           values: {
@@ -43,7 +43,7 @@ wrapper(({
       const TestState = new SimpleStateManager(42)
       cleanupManager.append(TestState.dispose)
 
-      const hookInterface = new HookInterface({
+      const hookInterface = new UNSAFE_HookInterface({
         cleanupManager,
         useHook: () => {
           const [active, setActiveState] = useState(true)
@@ -92,7 +92,7 @@ wrapper(({
       const TestState = new SimpleStateManager(42)
       cleanupManager.append(TestState.dispose)
 
-      const hookInterface = new HookInterface({
+      const hookInterface = new UNSAFE_HookInterface({
         cleanupManager,
         useHook: () => {
           const [active, setActiveState] = useState(false)

diff --git a/packages/react/tests/api/useSimpleStateValue/client-active-flag/without-selector.test.tsx b/packages/react/tests/api/useSimpleStateValue/client-active-flag/without-selector.test.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { CleanupManager, HookInterface } from '../../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface } from '../../../test-helpers'
 import { TestConfig, wrapper } from '../../../test-wrapper'
 
 wrapper(({
@@ -23,7 +23,7 @@ wrapper(({
       test(flagScenario, () => {
         const TestState = new SimpleStateManager(42)
         cleanupManager.append(TestState.dispose)
-        const hookInterface = new HookInterface({
+        const hookInterface = new UNSAFE_HookInterface({
           cleanupManager,
           useHook: () => useHook(TestState),
           values: {
@@ -43,7 +43,7 @@ wrapper(({
       const TestState = new SimpleStateManager(42)
       cleanupManager.append(TestState.dispose)
 
-      const hookInterface = new HookInterface({
+      const hookInterface = new UNSAFE_HookInterface({
         cleanupManager,
         useHook: () => {
           const [active, setActiveState] = useState(true)
@@ -92,7 +92,7 @@ wrapper(({
       const TestState = new SimpleStateManager(42)
       cleanupManager.append(TestState.dispose)
 
-      const hookInterface = new HookInterface({
+      const hookInterface = new UNSAFE_HookInterface({
         cleanupManager,
         useHook: () => {
           const [active, setActiveState] = useState(false)

diff --git a/packages/react/tests/api/useSimpleStateValueWithReactiveSelector/client-active-flag.test.tsx b/packages/react/tests/api/useSimpleStateValueWithReactiveSelector/client-active-flag.test.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { CleanupManager, HookInterface } from '../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface } from '../../test-helpers'
 import { TestConfig, wrapper } from '../../test-wrapper'
 
 wrapper(({
@@ -23,7 +23,7 @@ wrapper(({
       test(flagScenario, () => {
         const TestState = new SimpleStateManager(42)
         cleanupManager.append(TestState.dispose)
-        const hookInterface = new HookInterface({
+        const hookInterface = new UNSAFE_HookInterface({
           cleanupManager,
           useHook: () => useHook(TestState),
           values: {
@@ -43,7 +43,7 @@ wrapper(({
       const TestState = new SimpleStateManager(42)
       cleanupManager.append(TestState.dispose)
 
-      const hookInterface = new HookInterface({
+      const hookInterface = new UNSAFE_HookInterface({
         cleanupManager,
         useHook: () => {
           const [active, setActiveState] = useState(true)
@@ -92,7 +92,7 @@ wrapper(({
       const TestState = new SimpleStateManager(42)
       cleanupManager.append(TestState.dispose)
 
-      const hookInterface = new HookInterface({
+      const hookInterface = new UNSAFE_HookInterface({
         cleanupManager,
         useHook: () => {
           const [active, setActiveState] = useState(false)

diff --git a/packages/react/tests/api/useSimpleStateValueWithReactiveSelector/index.test.tsx b/packages/react/tests/api/useSimpleStateValueWithReactiveSelector/index.test.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { CleanupManager, HookInterface, IUserState } from '../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface, IUserState } from '../../test-helpers'
 import { TestConfig, wrapper } from '../../test-wrapper'
 
 wrapper(({
@@ -24,7 +24,7 @@ wrapper(({
       const TestState = new SimpleStateManager(defaultState)
       cleanupManager.append(TestState.dispose)
 
-      const hookInterface = new HookInterface({
+      const hookInterface = new UNSAFE_HookInterface({
         cleanupManager: cleanupManager,
         useHook: () => useSimpleStateValueWithReactiveSelector(TestState, (s) => s.luckyNumber),
         values: {
@@ -116,7 +116,7 @@ wrapper(({
     const TestState = new SimpleStateManager(defaultState)
     cleanupManager.append(TestState.dispose)
 
-    const hookInterface = new HookInterface({
+    const hookInterface = new UNSAFE_HookInterface({
       cleanupManager: cleanupManager,
       useHook: () => {
         const [key, setKey] = useState<keyof IUserState>('luckyNumber')

diff --git a/packages/react/tests/api/useStateValue/client-active-flag/with-selector.test.tsx b/packages/react/tests/api/useStateValue/client-active-flag/with-selector.test.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { CleanupManager, HookInterface } from '../../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface } from '../../../test-helpers'
 import { TestConfig, wrapper } from '../../../test-wrapper'
 
 wrapper(({
@@ -38,7 +38,7 @@ wrapper(({
           test(flagScenario, () => {
             const TestState = new StateManagerType(42)
             cleanupManager.append(TestState.dispose)
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager,
               useHook: () => useHook(TestState),
               values: {
@@ -58,7 +58,7 @@ wrapper(({
           const TestState = new StateManagerType(42)
           cleanupManager.append(TestState.dispose)
 
-          const hookInterface = new HookInterface({
+          const hookInterface = new UNSAFE_HookInterface({
             cleanupManager,
             useHook: () => {
               const [active, setActiveState] = useState(true)
@@ -119,7 +119,7 @@ wrapper(({
           const TestState = new StateManagerType(42)
           cleanupManager.append(TestState.dispose)
 
-          const hookInterface = new HookInterface({
+          const hookInterface = new UNSAFE_HookInterface({
             cleanupManager,
             useHook: () => {
               const [active, setActiveState] = useState(false)

diff --git a/packages/react/tests/api/useStateValue/client-active-flag/without-selector.test.tsx b/packages/react/tests/api/useStateValue/client-active-flag/without-selector.test.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { CleanupManager, HookInterface } from '../../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface } from '../../../test-helpers'
 import { TestConfig, wrapper } from '../../../test-wrapper'
 
 wrapper(({
@@ -38,7 +38,7 @@ wrapper(({
           test(flagScenario, () => {
             const TestState = new StateManagerType(42)
             cleanupManager.append(TestState.dispose)
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager,
               useHook: () => useHook(TestState),
               values: {
@@ -58,7 +58,7 @@ wrapper(({
           const TestState = new StateManagerType(42)
           cleanupManager.append(TestState.dispose)
 
-          const hookInterface = new HookInterface({
+          const hookInterface = new UNSAFE_HookInterface({
             cleanupManager,
             useHook: () => {
               const [active, setActiveState] = useState(true)
@@ -119,7 +119,7 @@ wrapper(({
           const TestState = new StateManagerType(42)
           cleanupManager.append(TestState.dispose)
 
-          const hookInterface = new HookInterface({
+          const hookInterface = new UNSAFE_HookInterface({
             cleanupManager,
             useHook: () => {
               const [active, setActiveState] = useState(false)

diff --git a/packages/react/tests/api/useStateValue/index.test.tsx b/packages/react/tests/api/useStateValue/index.test.tsx
@@ -1,5 +1,5 @@
 import { renderToStaticMarkup } from 'react-dom/server'
-import { CleanupManager, HookInterface, IUserState } from '../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface, IUserState } from '../../test-helpers'
 import { TestConfig, wrapper } from '../../test-wrapper'
 
 wrapper(({
@@ -40,7 +40,7 @@ wrapper(({
             const TestState = new StateManagerType(defaultState)
             cleanupManager.append(TestState.dispose)
 
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager,
               useHook: () => useStateValue(TestState),
               values: {
@@ -140,7 +140,7 @@ wrapper(({
             const TestState = new StateManagerType(defaultState)
             cleanupManager.append(TestState.dispose)
 
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager,
               useHook: () => useStateValue(TestState, null, Equality.shallowCompareObject),
               values: {
@@ -264,7 +264,7 @@ wrapper(({
             const TestState = new StateManagerType(defaultState)
             cleanupManager.append(TestState.dispose)
 
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager: cleanupManager,
               useHook: () => useStateValue(TestState, (s) => s.luckyNumber),
               values: {
@@ -358,7 +358,7 @@ wrapper(({
             const TestState = new StateManagerType(defaultState)
             cleanupManager.append(TestState.dispose)
 
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager: cleanupManager,
               useHook: () => useStateValue(
                 TestState,
@@ -482,7 +482,7 @@ wrapper(({
           const TestState = new StateManagerType(defaultState)
           cleanupManager.append(TestState.dispose)
 
-          const hookInterface = new HookInterface({
+          const hookInterface = new UNSAFE_HookInterface({
             cleanupManager,
             useHook: () => useStateValue(TestState, null, null),
             values: {

diff --git a/packages/react/tests/api/useStateValueWithReactiveSelector/client-active-flag.test.tsx b/packages/react/tests/api/useStateValueWithReactiveSelector/client-active-flag.test.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { CleanupManager, HookInterface } from '../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface } from '../../test-helpers'
 import { TestConfig, wrapper } from '../../test-wrapper'
 
 wrapper(({
@@ -38,7 +38,7 @@ wrapper(({
           test(flagScenario, () => {
             const TestState = new StateManagerType(42)
             cleanupManager.append(TestState.dispose)
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager,
               useHook: () => useHook(TestState),
               values: {
@@ -58,7 +58,7 @@ wrapper(({
           const TestState = new StateManagerType(42)
           cleanupManager.append(TestState.dispose)
 
-          const hookInterface = new HookInterface({
+          const hookInterface = new UNSAFE_HookInterface({
             cleanupManager,
             useHook: () => {
               const [active, setActiveState] = useState(true)
@@ -119,7 +119,7 @@ wrapper(({
           const TestState = new StateManagerType(42)
           cleanupManager.append(TestState.dispose)
 
-          const hookInterface = new HookInterface({
+          const hookInterface = new UNSAFE_HookInterface({
             cleanupManager,
             useHook: () => {
               const [active, setActiveState] = useState(false)

diff --git a/packages/react/tests/api/useStateValueWithReactiveSelector/index.test.tsx b/packages/react/tests/api/useStateValueWithReactiveSelector/index.test.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { CleanupManager, HookInterface, IUserState, TestUtils } from '../../test-helpers'
+import { CleanupManager, UNSAFE_HookInterface, IUserState, TestUtils } from '../../test-helpers'
 import { TestConfig, wrapper } from '../../test-wrapper'
 
 wrapper(({
@@ -43,7 +43,7 @@ wrapper(({
             const TestState = new StateManagerType(defaultState)
             cleanupManager.append(TestState.dispose)
 
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager: cleanupManager,
               useHook: () => useStateValueWithReactiveSelector(TestState, testSelector),
               values: {
@@ -137,7 +137,7 @@ wrapper(({
             const TestState = new StateManagerType(defaultState)
             cleanupManager.append(TestState.dispose)
 
-            const hookInterface = new HookInterface({
+            const hookInterface = new UNSAFE_HookInterface({
               cleanupManager: cleanupManager,
               useHook: () => useStateValueWithReactiveSelector(
                 TestState,
@@ -256,7 +256,7 @@ wrapper(({
         const TestState = new StateManagerType(defaultState)
         cleanupManager.append(TestState.dispose)
 
-        const hookInterface = new HookInterface({
+        const hookInterface = new UNSAFE_HookInterface({
           cleanupManager: cleanupManager,
           useHook: () => {
             const [key, setKey] = useState<keyof IUserState>('luckyNumber')
@@ -320,7 +320,7 @@ wrapper(({
           const TestState = new StateManagerType(defaultState)
           cleanupManager.append(TestState.dispose)
 
-          const hookInterface = new HookInterface({
+          const hookInterface = new UNSAFE_HookInterface({
             cleanupManager,
             useHook: () => useStateValueWithReactiveSelector(TestState, TestUtils.mockSelector, null),
             values: {