Test-driving a SvelteKit form

In this section, you’ll construct a new component named BirthdayForm, together with its test suite. This component is an HTML form that comprises two text fields: name and dob. Each input element has a corresponding label element. There’s also a button named Save that submits the form.

SvelteKit handles the submission of our form data from the client to the server. We won’t test this behavior in our Vitest test suites, instead leaving it up to the Playwright tests to ensure that all pieces slot together correctly.

Follow these steps to build the new form:

1. Create a new file named src/routes/birthdays/BirthdayForm.test.js with the following first test. This uses the queryByRole query function to find an element with the form role on the page:

   import { describe, it, expect } from 'vitest';
   import {
     render,
     screen
   } from '@testing-library/svelte';
   import BirthdayForm from '...