react 怎么mock数据
时间: 2024-05-04 07:12:19 浏览: 17
在 React 中,可以使用 Mock Service Worker(MSW)来模拟 API 请求和响应。MSW 可以拦截浏览器中的请求,并返回预定义的响应数据。以下是一个简单的示例:
首先,安装 MSW:
```
npm install msw --save-dev
```
然后,在测试文件中编写以下代码:
```javascript
import { rest } from 'msw';
import { setupServer } from 'msw/node';
const server = setupServer(
rest.get('/api/data', (req, res, ctx) => {
return res(ctx.json({ message: 'Hello, world!' }));
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
test('fetches data from the API', async () => {
const response = await fetch('/api/data');
const data = await response.json();
expect(data.message).toBe('Hello, world!');
});
```
这个测试文件会启动一个本地服务器,监听 `/api/data` 路径的 GET 请求,并返回一个 JSON 对象 `{ message: 'Hello, world!' }`。在测试中,我们使用 `fetch` 函数来发起请求,并断言返回的数据是否符合预期。