From fc60355746ac9f34cbe51f27b20f5e9f702ac6e2 Mon Sep 17 00:00:00 2001 From: miracles1919 <516571350@qq.com> Date: Mon, 26 Jun 2023 14:24:55 +0800 Subject: [PATCH] test: fix failed test --- jest.config.js | 2 +- .../image-viewer/tests/image-viewer.test.tsx | 40 ++++++++++--------- .../tests/passcode-input.test.tsx | 8 +++- src/components/popup/tests/popup.test.tsx | 22 +++++----- src/components/radio/tests/radio.test.tsx | 11 +++-- .../search-bar/tests/search-bar.test.tsx | 13 ++++-- src/components/swiper/tests/swiper.test.tsx | 26 +++++++----- src/tests/testing.tsx | 8 +++- 8 files changed, 79 insertions(+), 51 deletions(-) diff --git a/jest.config.js b/jest.config.js index 9cf1772d76..9cf30a6087 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,7 +1,7 @@ module.exports = { preset: 'ts-jest', testEnvironment: 'jsdom', - maxConcurrency: 1, + // maxConcurrency: 1, moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], modulePathIgnorePatterns: ['/lib/', '/dist/'], moduleDirectories: ['node_modules', 'src/tests'], diff --git a/src/components/image-viewer/tests/image-viewer.test.tsx b/src/components/image-viewer/tests/image-viewer.test.tsx index a655cd8a99..0fa411ac04 100644 --- a/src/components/image-viewer/tests/image-viewer.test.tsx +++ b/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() 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( ) - 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() }) }) diff --git a/src/components/passcode-input/tests/passcode-input.test.tsx b/src/components/passcode-input/tests/passcode-input.test.tsx index 31261ca825..ccd8e66020 100644 --- a/src/components/passcode-input/tests/passcode-input.test.tsx +++ b/src/components/passcode-input/tests/passcode-input.test.tsx @@ -69,7 +69,9 @@ describe('PasscodeInput', () => { render() 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) diff --git a/src/components/popup/tests/popup.test.tsx b/src/components/popup/tests/popup.test.tsx index 549cf9baf0..6565beb1f5 100644 --- a/src/components/popup/tests/popup.test.tsx +++ b/src/components/popup/tests/popup.test.tsx @@ -1,9 +1,9 @@ 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( @@ -11,19 +11,19 @@ describe('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( @@ -31,15 +31,15 @@ describe('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) }) }) diff --git a/src/components/radio/tests/radio.test.tsx b/src/components/radio/tests/radio.test.tsx index 40e8d99920..fa3b56fed1 100644 --- a/src/components/radio/tests/radio.test.tsx +++ b/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 ) - 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', () => { 2 ) - await userEvent.tripleClick(screen.getByRole('radio', { name: '1' })) + await act(async () => { + await userEvent.tripleClick(screen.getByRole('radio', { name: '1' })) + }) expect(onChange).toBeCalledTimes(1) }) }) diff --git a/src/components/search-bar/tests/search-bar.test.tsx b/src/components/search-bar/tests/search-bar.test.tsx index f68cf4e11e..53543ed29c 100644 --- a/src/components/search-bar/tests/search-bar.test.tsx +++ b/src/components/search-bar/tests/search-bar.test.tsx @@ -53,7 +53,9 @@ describe('adm-search-bar', () => { render() 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() 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() }) diff --git a/src/components/swiper/tests/swiper.test.tsx b/src/components/swiper/tests/swiper.test.tsx index a9b3298bdb..ded1fa445b 100644 --- a/src/components/swiper/tests/swiper.test.tsx +++ b/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)' diff --git a/src/tests/testing.tsx b/src/tests/testing.tsx index d3d59cac12..06c5916e7c 100644 --- a/src/tests/testing.tsx +++ b/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) }