如何使用Vitest为SvelteKit项目编写单元测试并传值给组件？

以下是针对你项目中三个文件的单元测试方案，基于Vitest和svelte-testing-library实现：

1. 测试src/lib/index.js的add函数 #

创建测试文件tests/lib/index.test.js，直接测试函数逻辑：

import { describe, expect, it } from 'vitest';
import { add } from '$lib/index.js';

describe('add function', () => {
  it('计算两个数字的和', () => {
    expect(add(1, 2)).toBe(3);
    expect(add(-5, 10)).toBe(5);
    expect(add(0, 0)).toBe(0);
  });
});

2. 测试主页src/routes/+page.svelte #

创建测试文件tests/routes/+page.test.js，验证页面内容渲染：

import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/svelte';
import Page from '$routes/+page.svelte';

describe('主页', () => {
  it('显示欢迎标题和文档链接提示', () => {
    render(Page);
    
    expect(screen.getByRole('heading', { name: /welcome to sveltekit/i })).toBeInTheDocument();
    expect(screen.getByText(/visit kit.svelte.dev to read the documentation/i)).toBeInTheDocument();
  });
});

3. 测试About页面src/routes/about/+page.svelte（含传值与交互） #

创建测试文件tests/routes/about/+page.test.js，重点解决组件传值和双向绑定的测试：

传递自定义属性值 #

在渲染组件时，通过render函数的第二个参数传入props对象，即可给组件的export属性赋值：

import { describe, expect, it } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/svelte';
import AboutPage from '$routes/about/+page.svelte';

describe('About页面', () => {
  it('使用默认值渲染', () => {
    render(AboutPage);
    
    expect(screen.getByText('Hi bar!')).toBeInTheDocument();
    const input = screen.getByRole('textbox');
    expect(input).toHaveValue('bar');
  });

  it('接收自定义foo属性并正确显示', () => {
    // 通过props传递自定义值
    render(AboutPage, { props: { foo: '自定义内容' } });
    
    expect(screen.getByText('Hi 自定义内容!')).toBeInTheDocument();
    const input = screen.getByRole('textbox');
    expect(input).toHaveValue('自定义内容');
  });

  it('输入框修改值后同步更新显示', async () => {
    render(AboutPage);
    const input = screen.getByRole('textbox');
    const displayElement = screen.getByText(/hi /i);

    // 模拟用户输入
    await fireEvent.input(input, { target: { value: '新值' } });
    
    // 验证显示内容和输入框值同步更新
    expect(displayElement.textContent).toBe('Hi 新值!');
    expect(input).toHaveValue('新值');
  });
});

内容的提问来源于stack exchange，提问作者Péter Szilvási