面试题：Svelte组件测试深入：模拟事件与状态更新

Question

假设你有一个Svelte按钮组件，当点击按钮时，会触发一个函数更新组件内部的某个状态变量。使用Jest和Testing Library编写测试用例，验证按钮点击后状态变量是否按照预期更新，同时要模拟该函数的返回值。

Answer 1

1. 首先，确保项目中安装了 @testing-library/svelte 和 jest。
2. 假设Svelte按钮组件代码如下（Button.svelte）：

<script>
    let count = 0;
    const updateCount = () => {
        count++;
        return 'update success';
    };
</script>

<button on:click={updateCount}>Click me</button>

3. 编写测试用例（Button.test.js）：

import { render, screen } from '@testing-library/svelte';
import Button from './Button.svelte';

jest.mock('./Button.svelte', () => {
    const originalModule = jest.requireActual('./Button.svelte');
    return {
      ...originalModule,
        updateCount: jest.fn(() => 'Mocked return value')
    };
});

describe('Button Component', () => {
    it('should update the state variable on button click and have correct mock return value', () => {
        render(Button);

        const button = screen.getByText('Click me');
        expect(button).toBeInTheDocument();

        const mockUpdateCount = jest.fn(() => 'Mocked return value');
        Object.defineProperty(Button.prototype, 'updateCount', {
            value: mockUpdateCount
        });

        button.click();

        expect(mockUpdateCount).toHaveBeenCalled();
        expect(mockUpdateCount()).toBe('Mocked return value');
    });
});

上述测试中：

• 首先使用 render 函数渲染Svelte组件。
• 通过 screen.getByText 获取按钮元素，并确认按钮在文档中。
• 使用 jest.mock 模拟 updateCount 函数的返回值。
• 点击按钮后，使用 expect(mockUpdateCount).toHaveBeenCalled() 验证函数是否被调用，使用 expect(mockUpdateCount()).toBe('Mocked return value') 验证模拟函数的返回值。