Svelte应用中REST请求Mock实现方案咨询

下面提供两种经过验证的REST请求Mock实现方案，包含最小可运行示例：

方案一：使用MSW（Mock Service Worker） #

MSW是框架无关的Mock工具，并非仅适用于React，之前未响应大概率是配置步骤缺失。

步骤1：安装依赖 #

npm install msw --save-dev

步骤2：创建Mock服务配置 #

在项目中新建src/mocks/server.js：

import { setupServer } from 'msw/node'
import { rest } from 'msw'

// 定义Mock接口和响应
export const server = setupServer(
  rest.get('/api/data', (req, res, ctx) => {
    return res(ctx.json({ message: 'Mocked data from MSW' }))
  })
)

步骤3：编写组件测试 #

假设有一个简单的请求组件DataFetcher.svelte：

<script>
  let data = null
  let error = null

  async function fetchData() {
    try {
      const res = await fetch('/api/data')
      data = await res.json()
    } catch (err) {
      error = err.message
    }
  }
</script>

<button on:click={fetchData}>Fetch Data</button>
{#if data}
  <p>{data.message}</p>
{/if}
{#if error}
  <p class="error">{error}</p>
{/if}

对应的测试文件DataFetcher.test.js：

import { render, screen, fireEvent } from '@testing-library/svelte'
import { server } from '../src/mocks/server'
import DataFetcher from './DataFetcher.svelte'

// 全局启动/关闭Mock服务
beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

test('fetches and displays mocked data', async () => {
  render(DataFetcher)
  
  await fireEvent.click(screen.getByText('Fetch Data'))
  
  expect(await screen.findByText('Mocked data from MSW')).toBeInTheDocument()
})

test('handles request failure', async () => {
  // 临时替换接口逻辑模拟错误
  server.use(
    rest.get('/api/data', (req, res, ctx) => {
      return res(ctx.status(500), ctx.json({ error: 'Server error' }))
    })
  )
  
  render(DataFetcher)
  
  await fireEvent.click(screen.getByText('Fetch Data'))
  
  expect(await screen.findByText('Server error')).toBeInTheDocument()
})

方案二：使用jest-fetch-mock #

如果更倾向于直接MockfetchAPI，可使用jest-fetch-mock：

步骤1：安装依赖 #

npm install jest-fetch-mock --save-dev

步骤2：配置Jest #

在jest.config.js中添加：

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
}

新建jest.setup.js启用Mock：

import fetchMock from 'jest-fetch-mock'
fetchMock.enableMocks()

步骤3：编写测试 #

使用同一DataFetcher.svelte组件，测试文件如下：

import { render, screen, fireEvent } from '@testing-library/svelte'
import DataFetcher from './DataFetcher.svelte'

// 每个测试前重置Mock状态
beforeEach(() => {
  fetch.resetMocks()
})

test('fetches and displays data with fetch mock', async () => {
  // 模拟成功响应
  fetch.mockResponseOnce(JSON.stringify({ message: 'Mocked data from fetch-mock' }))
  
  render(DataFetcher)
  
  await fireEvent.click(screen.getByText('Fetch Data'))
  
  expect(fetch).toHaveBeenCalledWith('/api/data')
  expect(await screen.findByText('Mocked data from fetch-mock')).toBeInTheDocument()
})

test('handles fetch error', async () => {
  // 模拟请求失败
  fetch.mockRejectOnce(new Error('Network error'))
  
  render(DataFetcher)
  
  await fireEvent.click(screen.getByText('Fetch Data'))
  
  expect(await screen.findByText('Network error')).toBeInTheDocument()
})

内容的提问来源于stack exchange，提问作者alebo611