测试用例:
import React, { useState, useEffect } from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { rest } from 'msw';
import { setupServer } from 'msw/node';
const server = setupServer(
rest.get('https://jsonplaceholder.typicode.com/posts/1', (req, res, ctx) => {
return res(
ctx.json({
userId: 1,
id: 1,
title: 'Test Title',
body: 'Test Body',
})
);
})
);
beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());
function MyComponent() {
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const json = await response.json();
setData(json);
}
fetchData();
}, []);
return (
{data ? (
{data.title}
{data.body}
) : (
Loading...
)}
);
}
describe('MyComponent', () => {
it('fetches data and renders correctly', async () => {
render( );
await waitFor(() => expect(screen.getByText('Test Title')).toBeInTheDocument());
expect(screen.getByText('Test Body')).toBeInTheDocument();
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
});
});
本例中,我们编写了一个组件MyComponent
,它使用了Fetch API和useState的useEffect来获取数据并显示在页面上。我们使用了@testing-library/react
和msw
来编写测试用例。
在测试用例中,我们使用setupServer
来创建一个服务器并通过rest.get
来定义我们要拦截的HTTP请求。我们使用了beforeAll
和afterAll
来启动和关闭服务器,而使用afterEach
来重置我们的