svecosystem/formsnap

data-testid property does not exist on Form.Root

moreorover opened this issue · 3 comments

Current Behavior

<script lang="ts">
	import type { PageData } from './$types';
	import * as Form from '$lib/components/ui/form';
	import { registerSchema, type RegisterSchema } from '$lib/schema/loginSchema';
	import type { SuperValidated } from 'sveltekit-superforms';

	export let data: PageData;

	let form: SuperValidated<RegisterSchema> = data.form;
</script>

<Form.Root method="POST" {form} schema={registerSchema} let:config data-testid="register-form">
	<Form.Field {config} name="full_name">
		<Form.Item>
			<Form.Label>Full Name</Form.Label>
			<Form.Input data-testid="full_name" />
			<Form.Validation />
		</Form.Item>
	</Form.Field>
	<Form.Button>Register</Form.Button>
</Form.Root>

Produces the following error:

Svelte: Object literal may only specify known properties, and "data-testid" does not exist in type

When running in DEV mode data-testid property gets attached to the form element on the client, but it should not complain.

Expected Behavior

Error should not be produced.

Steps To Reproduce

<script lang="ts">
	import type { PageData } from './$types';
	import * as Form from '$lib/components/ui/form';
	import { registerSchema, type RegisterSchema } from '$lib/schema/loginSchema';
	import type { SuperValidated } from 'sveltekit-superforms';

	export let data: PageData;

	let form: SuperValidated<RegisterSchema> = data.form;
</script>

<Form.Root method="POST" {form} schema={registerSchema} let:config data-testid="register-form">
	<Form.Field {config} name="full_name">
		<Form.Item>
			<Form.Label>Full Name</Form.Label>
			<Form.Input data-testid="full_name" />
			<Form.Validation />
		</Form.Item>
	</Form.Field>
	<Form.Button>Register</Form.Button>
</Form.Root>

Reproducer on Stackblitz does not show this error, however, on my local system I'm using WebStorm and receiving the following:

image

Link to Reproduction / Stackblitz (reproduction template)

https://stackblitz.com/edit/github-zutndn?file=src%2Froutes%2F%2Bpage.svelte

More Information

No response

I think you should be able to get around this annoying issue by doing something like:

<script>

	const formAttrs = {
		'data-testid': 'form'
	}
</script>

<Form.Root {...formAttrs} />

Error does not go away with your suggestion.

it is strange because on other form elements this does not produce such error message, like

<Form.Input data-testid="email" />