Can not use @testing-library/user-event with conform 1.0.4

[martialanouman]

Hi everyone,

I ran into a strange issue will writing test for a react component containing a form powered with conform.
When a try to interact with an input or the submit button i have the following error:

TypeError: document.forms.namedItem is not a function
 ❯ getFormElement node_modules/.pnpm/@[email protected]/node_modules/@conform-to/dom/form.mjs:266:27
 ❯ Object.submit node_modules/.pnpm/@[email protected]/node_modules/@conform-to/dom/form.mjs:327:24
 ❯ onSubmit node_modules/.pnpm/@[email protected][email protected]/node_modules/@conform-to/react/context.mjs:205:28
 ❯ submitHandler node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-router-dom/index.tsx:1264:19
 ❯ HTMLUnknownElement.callCallback node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4164:14
 ❯ HTMLUnknownElement.dispatchEvent node_modules/.pnpm/[email protected]/node_modules/happy-dom/src/event/EventTarget.ts:223:42
 ❯ HTMLUnknownElement.dispatchEvent node_modules/.pnpm/[email protected]/node_modules/happy-dom/src/nodes/element/Element.ts:1171:29
 ❯ HTMLUnknownElement.dispatchEvent node_modules/.pnpm/[email protected]/node_modules/happy-dom/src/event/EventTarget.ts:132:9
 ❯ HTMLUnknownElement.dispatchEvent node_modules/.pnpm/[email protected]/node_modules/happy-dom/src/nodes/element/Element.ts:1171:29
 ❯ Object.invokeGuardedCallbackDev node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom.development.js:4213:16

I'm using the latest version of @testing-library/user-event 14.5.2.

Maybe im doing something wrong.

Test code:

render(<RemixStub />)

await userEvent.type(screen.getByRole('textbox', { name: /email ou matricule/i }), 'value')

LoginForm component

export function LoginForm() {
	const [form, fields] = useForm({
		lastResult: undefined,
		constraint: getZodConstraint(schema),
		shouldValidate: 'onBlur',
		shouldRevalidate: 'onInput',
		onValidate({ formData }) {
			return parseWithZod(formData, { schema })
		},
		id: 'login-form',
	})

	return (
		<div className='space-y-6 w-full'>
			<div className='flex justify-center'>
				<img
					src='/assets/images/logo-gs2e.png'
					alt='logo gs2e'
					className='w-[14rem] h-auto'
				/>
			</div>
			<h1 className='text-center text-primary'>Connectez-vous</h1>

			<Form method='post' {...getFormProps(form)} className='space-y-4'>
				<div>
					<Label htmlFor={fields.username.id}>Email ou matricule</Label>
					<InputField meta={fields.username} type='text' className='w-full' />
				</div>

				<div>
					<Label htmlFor={fields.password.id}>Mot de passe</Label>
					<InputField meta={fields.password} type='password' />
				</div>

				<ButtonLoading className='w-full'>Se connecter</ButtonLoading>

				<div className='flex justify-end text-sm text-foreground'>
					<Link to='/forgot-password'>Mot de passe oublié?</Link>
				</div>
			</Form>
		</div>
	)
}

[edmundhung]

It looks like the issue comes from happy-dom not implementing the document.forms.namedItem(). Any chance you can switch to jsdom instead?

[martialanouman]

Unfortunately, i can't switch to jsdom since it causes more errors while running my tests.

In the meantime, i opened an issue on happy-dom repo about it.

[martialanouman]

hi @edmundhung ,
The issue i opened on happy-dom repo has been resolved, but now i got a weird error message when submitting form:

The submit event is dispatched by form#form-id instead of form#form-id

The form is inside a Dialog comp. (See here Dialog)

[martialanouman]

No, i don't render it inside a another form.
I only got this error while testing the the component. It works fine in a real browser.

It surely related to happy-dom again...

[edmundhung]

So the message mentioned two form with different id. Can you share where they are located? And how they are rendered with React?

[martialanouman]

In fact, the mentioned id refers to the same form. Here's the complete comp code:

// imports here...

export function ImpCenterForm() {
	const { Form, data, isOk, isSubmitting } = useImpCenterFetcher()
	const closeBtnRef = useRef<ElementRef<typeof Button>>(null)

	const [form, fields] = useImpCenterForm(data)

	useEffect(() => {
		if (isOk) {
			closeBtnRef.current?.click()
			toast.success('Centre créé avec succès!')
		}
	}, [isOk])

	return (
		<>
			<DialogTitle>Nouveau centre</DialogTitle>

			<div>
				<Form
					{...getFormProps(form)}
					method='POST'
					action='.'
					className='space-y-4 md:space-y-0'
				>
					<div className='grid grid-cols-1 gap-4 mb-4'>
						<div>
							<Label htmlFor={fields.label.id}>Nom</Label>
							<InputField meta={fields.label} type='text' />
						</div>
						<div>
							<CheckboxField meta={fields.active} label='Actif' />
						</div>
					</div>

					<DialogFooter className='gap-y-2 md:space-y-0'>
						<DialogClose asChild>
							<Button type='button' variant='outline' ref={closeBtnRef}>
								Annuler
							</Button>
						</DialogClose>
						<ButtonLoading loading={isSubmitting} form={form.id}>
							Créer
						</ButtonLoading>
					</DialogFooter>
				</Form>
			</div>
		</>
	)
}

export const schema = z.object({
	label: z.string({ required_error: 'Entrez le nom du centre' }).trim(),
	active: z.boolean().optional(),
})

function useImpCenterForm(data: SubmissionResult<string[]> | undefined) {
	return useForm({
		constraint: getZodConstraint(schema),
		id: 'imputation-center-form',
		lastResult: data,
		onValidate({ formData }) {
			return parseWithZod(formData, { schema })
		},
		shouldValidate: 'onBlur',
		shouldRevalidate: 'onInput',
		defaultValue: {
			active: 'on',
		},
	})
}

function useImpCenterFetcher() {
	const fetcher = useFetcher<Action>()
	const isSubmitting = fetcher.state === 'submitting'

	return {
		data: fetcher.data,
		isOk: fetcher.data?.status === 'success',
		isSubmitting,
		Form: fetcher.Form,
	}
}

and here is where/how it's used

function CreateImpCenterButton() {
	return (
		<Dialog>
			<DialogTrigger asChild>
				<Button size='sm'>Nouveau centre</Button>
			</DialogTrigger>
			<DialogContent className='max-w-lg'>
				<ImpCenterForm />
			</DialogContent>
		</Dialog>
	)
}

Like you can see (unless i missed something...), there is no additional or nested form

[edmundhung]

The message you mentioned is logged only when the form element on the submit event (event.target) does not match the result of document.forms.namedItem(formId). So it might be happy-dom returning a different form element..

[martialanouman]

Maybe...