Act warning on form submission with user.type(textInput, '{Enter}')

[axelboc]

I have a form with a text input, a submit button (button[type="submit"]) and an onSubmit event handler that triggers a bunch of state updates and effects.

If I write my test as follows, everything works fine:

await user.type(textInput, 'foo');
await user.click(submitBtn);
expect(screen.getBySomething(...)).toBeVisible();

However, if I type {Enter} in the text field to submit the form instead of pressing the button, I get an act warning:

await user.type(textInput, 'foo{Enter}');
expect(screen.getBySomething(...)).toBeVisible();

It seems that form submission on Enter is handled via the intermediate keypress event that @testing-library/user-event dispatches. Is it possible that @testing-library/user-event somehow forgets to wrap this form submission in act?

[ph-fritsche]

All events are dispatched per

user-event/src/event/dispatchEvent.ts

Lines 6 to 43 in 8215e2e

	export function dispatchEvent(
	config: Config,
	target: Element,
	event: Event,
	preventDefault: boolean = false,
	) {
	const type = event.type as EventType
	const behaviorImplementation = preventDefault
	? () => {}
	: (behavior[type] as BehaviorPlugin<EventType> | undefined)?.(
	event,
	target,
	config,
	)
	if (behaviorImplementation) {
	event.preventDefault()
	let defaultPrevented = false
	Object.defineProperty(event, 'defaultPrevented', {
	get: () => defaultPrevented,
	})
	Object.defineProperty(event, 'preventDefault', {
	value: () => {
	defaultPrevented = event.cancelable
	},
	})
	wrapEvent(() => target.dispatchEvent(event), target)
	if (!defaultPrevented as boolean) {
	behaviorImplementation()
	}
	return !defaultPrevented
	}
	return wrapEvent(() => target.dispatchEvent(event), target)
	}

The submit event per keypress is triggered in

user-event/src/event/behavior/keypress.ts

Lines 25 to 30 in 8215e2e

	} else if (
	form &&
	SubmitSingleInputOnEnter.includes(target.type) &&
	form.querySelectorAll('input').length === 1
	) {
	return () => dispatchUIEvent(config, form, 'submit')

[axelboc]

I think I'm in the case where it dispatches a click on the form's submit button, but yeah.

[axelboc]

I should add that I configure user-event with delay: null.

[ph-fritsche]

Try to reproduce your problem in Codesandbox. Doing so often reveals the root of it just by isolating it.

I should add that I configure user-event with delay: null.

Have you tried using the default?
Is it possible that your components asynchronously update state?

[axelboc]

I've managed to switch back to using the default delay. I'm now just calling userEvent.setup() and I'm still seeing the act warning when submitting via {Enter}. The test uses real timers. I'll try to make a repro if I get the time 👍