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:
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" />