How to properly test $page.data in vitest?

[catrektson]

I would like to know the proper way of testing $page.data using vitest? I have followed this guide but the tests keeps on failing.

I know these cases are usually for E2E tests (i.e. playwright) but I was tasked to follow this concept

// src/routes/+page.ts
export function load() {
	return {
		"foo": "hello"
	}
}

// src/routes/+page.svelte
<script lang="ts">
import { page } from "$app/stores"

$: ({ data } = $page)
</script>

<div id="sample">{data.foo}</div>

// page.test.ts
import { render } from "@testing-library/svelte"

import Page from "./+page.svelte"

describe("Basic page test", () => {
	it("can read page data", () => {
		const { container } = render(Page)
		const msgHeading = container.querySelector("#sample")

		expect(msgHeading).toBeTruthy()
		expect(msgHeading?.textContent).toEqual("hello")
	})
})

// result
 FAIL  src/routes/page.test.ts > Basic page test > can read page data
AssertionError: expected 'undefined' to deeply equal 'hello'
 ❯ src/routes/page.test.ts:11:35
      9| 
     10|   expect(msgHeading).toBeTruthy()
     11|   expect(msgHeading?.textContent).toEqual("hello")
       |                                   ^
     12|  })
     13| })
 ❯ node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/chunk-runtime-chain.f86e5250.js:2293:13
 ❯ node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/chunk-runtime-chain.f86e5250.js:2170:26
 ❯ runTest node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/chunk-runtime-setup.5398e2c4.js:397:42
 ❯ runSuite node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/chunk-runtime-setup.5398e2c4.js:495:15
 ❯ runSuite node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/chunk-runtime-setup.5398e2c4.js:495:15
 ❯ runFiles node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/chunk-runtime-setup.5398e2c4.js:630:5
 ❯ startTestsNode node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/chunk-runtime-setup.5398e2c4.js:648:3
 ❯ node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/entry.js:100:11
 ❯ Module.withEnv node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vitest/dist/chunk-runtime-setup.5398e2c4.js:185:5

  - Expected   "hello"
  + Received   "undefined"

As you can see with the test result above, it keeps receiving undefined.