diff --git a/src/hooks/useNotifyWatch.ts b/src/hooks/useNotifyWatch.ts index 5beea99e..a96e93b9 100644 --- a/src/hooks/useNotifyWatch.ts +++ b/src/hooks/useNotifyWatch.ts @@ -5,7 +5,7 @@ import type { FormStore } from './useForm'; /** * Call action with delay in macro task. */ -const macroTask = (fn: VoidFunction) => { +export const macroTask = (fn: VoidFunction) => { const channel = new MessageChannel(); channel.port1.onmessage = fn; channel.port2.postMessage(null); diff --git a/src/utils/delayUtil.ts b/src/utils/delayUtil.ts index b852ac35..86551b23 100644 --- a/src/utils/delayUtil.ts +++ b/src/utils/delayUtil.ts @@ -1,9 +1,12 @@ +import { macroTask } from '../hooks/useNotifyWatch'; import raf from '@rc-component/util/lib/raf'; export default async function delayFrame() { return new Promise(resolve => { - raf(() => { - resolve(); + macroTask(() => { + raf(() => { + resolve(); + }); }); }); } diff --git a/tests/common/index.ts b/tests/common/index.ts index 7f3b43f6..94fb4292 100644 --- a/tests/common/index.ts +++ b/tests/common/index.ts @@ -1,4 +1,4 @@ -import timeout from './timeout'; +import timeout, { waitFakeTime } from './timeout'; import { matchNamePath } from '../../src/utils/valueUtil'; import { fireEvent, act } from '@testing-library/react'; @@ -46,6 +46,13 @@ export async function changeValue(wrapper: HTMLElement, value: string | string[] } } +export async function changeValueWithMockTimer(wrapper: HTMLElement, value: string | string[]) { + const promise = changeValue(wrapper, value); + + await waitFakeTime(); + return promise; +} + export function matchError( wrapper: HTMLElement, error?: boolean | string, diff --git a/tests/dependencies.test.tsx b/tests/dependencies.test.tsx index 9023bb28..8ba8260d 100644 --- a/tests/dependencies.test.tsx +++ b/tests/dependencies.test.tsx @@ -3,7 +3,7 @@ import type { FormInstance } from '../src'; import Form, { Field } from '../src'; import { waitFakeTime } from './common/timeout'; import InfoField, { Input } from './common/InfoField'; -import { changeValue, matchError, getInput } from './common'; +import { changeValue, matchError, getInput, changeValueWithMockTimer } from './common'; import { fireEvent, render } from '@testing-library/react'; describe('Form.Dependencies', () => { @@ -12,6 +12,7 @@ describe('Form.Dependencies', () => { }); it('touched', async () => { + jest.useFakeTimers(); const form = React.createRef(); const { container } = render( @@ -24,12 +25,13 @@ describe('Form.Dependencies', () => { ); // Not trigger if not touched - await changeValue(getInput(container, 0), ['bamboo', '']); + await changeValueWithMockTimer(getInput(container, 0), ['bamboo', '']); matchError(getInput(container, 1, true), false); // Trigger if touched form.current?.setFields([{ name: 'field_2', touched: true }]); - await changeValue(getInput(container, 0), ['bamboo', '']); + + await changeValueWithMockTimer(getInput(container, 0), ['bamboo', '']); matchError(getInput(container, 1, true), true); }); @@ -260,7 +262,6 @@ describe('Form.Dependencies', () => { false}> {() => { - counter += 1; return null; }}