test: fix failed test

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
-  maxConcurrency: 1,
+  // maxConcurrency: 1,
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   modulePathIgnorePatterns: ['<rootDir>/lib/', '<rootDir>/dist/'],
   moduleDirectories: ['node_modules', 'src/tests'],

src/components/image-viewer/tests/image-viewer.test.tsx

@@ -166,7 +166,6 @@ describe('ImageViewer.Multi', () => {
     expect(renderer.getByText('3 / 4')).not.toBeNull()
     expect(renderer.container).toMatchSnapshot()
   })
-
   test('rendering with footer', () => {
     function App() {
       return (
@@ -180,7 +179,6 @@ describe('ImageViewer.Multi', () => {
     render(<App />)
     expect(screen.getByText('查看原图')).toBeInTheDocument()
   })
-
   test('`ImageViewer.Multi.show` should be work', async () => {
     render(
       <>
@@ -196,16 +194,16 @@ describe('ImageViewer.Multi', () => {
     fireEvent.click(screen.getByText('show'))
     const imgs = await screen.findAllByRole('img')
     expect(imgs[0]).toBeVisible()
-    await userEvent.click(imgs[0])
+    await act(async () => {
+      await userEvent.click(imgs[0])
+    })
     await waitFor(() => expect(imgs[0]).not.toBeVisible())
   })
-
   test('slide should be work', async () => {
     Object.defineProperty(window, 'innerWidth', {
       value: 300,
     })
     const onIndexChange = jest.fn()
-
     render(
       <button
         onClick={() => {
@@ -215,24 +213,30 @@ describe('ImageViewer.Multi', () => {
         show
       </button>
     )
-
     fireEvent.click(screen.getByText('show'))
     await screen.findAllByRole('img')
     const slides = document.querySelectorAll(`.${classPrefix}-slides`)[0]
     expect(screen.getByText('1 / 4')).toBeInTheDocument()
 
-    mockDrag(slides, [
-      {
-        clientX: 300,
-      },
-      {
-        clientX: 200,
-      },
-      {
-        clientX: 100,
-      },
-    ])
-    await waitFor(() => expect(onIndexChange).toBeCalledWith(1))
+    await act(async () => {
+      await mockDrag(
+        slides,
+        [
+          {
+            clientX: 300,
+          },
+          {
+            clientX: 200,
+          },
+          {
+            clientX: 100,
+          },
+        ],
+        5
+      )
+    })
+
+    expect(onIndexChange).toBeCalledWith(1)
     expect(screen.getByText('2 / 4')).toBeInTheDocument()
   })
 })

src/components/passcode-input/tests/passcode-input.test.tsx

@@ -69,7 +69,9 @@ describe('PasscodeInput', () => {
     render(<PasscodeInput plain />)
     const input = screen.getByRole('button', { name: '密码输入框' })
     fireEvent.focus(input)
-    await userEvent.keyboard('abc')
+    await act(async () => {
+      await userEvent.keyboard('abc')
+    })
     expect(input).toHaveTextContent('abc')
   })
 
@@ -91,7 +93,9 @@ describe('PasscodeInput', () => {
     const input = screen.getByRole('button', { name: '密码输入框' })
     fireEvent.focus(input)
     expect(onFocus).toBeCalled()
-    await userEvent.keyboard('abcde')
+    await act(async () => {
+      await userEvent.keyboard('abcde')
+    })
     expect(onFill).toBeCalled()
     expect(onChange).toBeCalledTimes(4)
     fireEvent.blur(input)

src/components/popup/tests/popup.test.tsx

@@ -1,45 +1,45 @@
 import * as React from 'react'
-import { render, mockDrag } from 'testing'
+import { render, mockDrag, act, waitFor } from 'testing'
 import Popup from '..'
 
 describe('Popup', () => {
-  test('top swipe should be closed', () => {
+  test('top swipe should be closed', async () => {
     const onClose = jest.fn()
     render(
       <Popup visible onClose={onClose} position='top' closeOnSwipe>
         <div style={{ height: '400px', width: '400px' }}></div>
       </Popup>
     )
 
-    mockDrag(
+    await mockDrag(
       document.querySelector('.adm-popup') as Element,
-      new Array(8).fill(0).map((_, i) => {
+      new Array(4).fill(0).map((_, i) => {
         return {
           clientY: 400 - 50 * i,
         }
-      })
+      }),
+      5
     )
-
     expect(onClose).toBeCalledTimes(1)
   })
 
-  test('bottom swipe should be closed', () => {
+  test('bottom swipe should be closed', async () => {
     const onClose = jest.fn()
     render(
       <Popup visible onClose={onClose} position='bottom' closeOnSwipe>
         <div style={{ height: '400px', width: '400px' }}></div>
       </Popup>
     )
 
-    mockDrag(
+    await mockDrag(
       document.querySelector('.adm-popup') as Element,
-      new Array(8).fill(0).map((_, i) => {
+      new Array(6).fill(0).map((_, i) => {
         return {
           clientY: 50 * i,
         }
-      })
+      }),
+      5
     )
-
     expect(onClose).toBeCalledTimes(1)
   })
 })

src/components/radio/tests/radio.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { fireEvent, render, testA11y, userEvent, screen } from 'testing'
+import { fireEvent, render, testA11y, userEvent, screen, act } from 'testing'
 import Radio from '../'
 import { RadioGroupProps } from '../group'
 
@@ -30,7 +30,10 @@ describe('Radio', () => {
         1
       </Radio>
     )
-    await userEvent.tripleClick(screen.getByRole('radio'))
+
+    await act(async () => {
+      await userEvent.tripleClick(screen.getByRole('radio'))
+    })
     expect(onChange).toBeCalledTimes(1)
   })
 })
@@ -125,7 +128,9 @@ describe('Radio.Group', () => {
         <Radio value='2'>2</Radio>
       </Radio.Group>
     )
-    await userEvent.tripleClick(screen.getByRole('radio', { name: '1' }))
+    await act(async () => {
+      await userEvent.tripleClick(screen.getByRole('radio', { name: '1' }))
+    })
     expect(onChange).toBeCalledTimes(1)
   })
 })

src/components/search-bar/tests/search-bar.test.tsx

@@ -53,7 +53,9 @@ describe('adm-search-bar', () => {
     render(<SearchBar showCancelButton />)
     const input = screen.getByRole('searchbox')
     fireEvent.focus(input)
-    await userEvent.type(input, '12')
+    await act(async () => {
+      await userEvent.type(input, '12')
+    })
     fireEvent.click(screen.getByText('取消'))
     expect(input).toHaveValue('')
   })
@@ -62,7 +64,9 @@ describe('adm-search-bar', () => {
     const onSearch = jest.fn()
     render(<SearchBar onSearch={onSearch} />)
     const input = screen.getByRole('searchbox')
-    await userEvent.type(input, '12{enter}')
+    await act(async () => {
+      await userEvent.type(input, '12{enter}')
+    })
     expect(onSearch).toBeCalledWith('12')
   })
 
@@ -80,7 +84,10 @@ describe('adm-search-bar', () => {
     expect(input).toHaveFocus()
     expect(onFocus).toBeCalled()
 
-    await userEvent.type(input, '12')
+    await act(async () => {
+      await userEvent.type(input, '12')
+    })
+
     act(() => {
       ref.current?.clear()
     })

src/components/swiper/tests/swiper.test.tsx

@@ -237,17 +237,21 @@ describe('Swiper', () => {
     )
 
     const el = $$(`.${classPrefix}-track`)[0]
-    mockDrag(el, [
-      { clientX: 50, clientY: 300 },
-      {
-        clientX: 50,
-        clientY: 200,
-      },
-      {
-        clientX: 60,
-        clientY: 50,
-      },
-    ])
+    await mockDrag(
+      el,
+      [
+        { clientX: 50, clientY: 300 },
+        {
+          clientX: 50,
+          clientY: 200,
+        },
+        {
+          clientX: 60,
+          clientY: 50,
+        },
+      ],
+      5
+    )
 
     expect($$(`.${classPrefix}-track-inner`)[0]).toHaveStyle(
       'transform: translate3d(0,-100%,0)'

src/tests/testing.tsx

@@ -104,7 +104,7 @@ export { customRender as render }
 export const testA11y = async (ui: UI | Element) => {
   const container = React.isValidElement(ui) ? customRender(ui).container : ui
 
-  const results = await axe(container)
+  const results = await axe(container as Element)
 
   expect(results).toHaveNoViolations()
 }
@@ -116,7 +116,7 @@ export const actSleep = (time: number) => {
   return act(() => sleep(time))
 }
 
-export const mockDrag = (el: Element, options: any[]) => {
+export const mockDrag = async (el: Element, options: any[], time?: number) => {
   const [downOptions, ...moveOptions] = options
   fireEvent.mouseDown(el, {
     buttons: 1,
@@ -127,6 +127,10 @@ export const mockDrag = (el: Element, options: any[]) => {
       buttons: 1,
       ...item,
     })
+
+    if (time) {
+      await sleep(time)
+    }
   }
   fireEvent.mouseUp(el)
 }