Test-driving the page component
It’s time to create the page
component that exists for the route. As ever, we’ll start with a test:
- Create the
src/routes/birthdays/page.test.js
file and add the following imports. The last of these is for thepage
component itself. Because SvelteKit expects the component for a route to exist in a file named+page.svelte
, we may as well give the component the namePage
(that is what it is, after all):import { describe, it, expect } from 'vitest'; import { render, screen } from '@testing-library/svelte'; import Page from './+page.svelte';
- Next, let’s write out the test. The key part here is that
Page
gets passed adata
prop, which needs to match the structure of ourload
function. In the actual runtime environment, SvelteKit will invoke theload
function and then render the component in+page.svelte
with thedata
prop set to the result of theload
function:describe...