Playwright에서는 page.route()를 사용하여 네트워크 요청을 가로채 원하는 응답을 반환할 수 있습니다.
page.route()를 이용한 네트워크 요청 모킹import { test, expect } from '@playwright/test';
test('모킹된 API 응답으로 테스트', async ({ page }) => {
await page.route('<https://api.example.com/data>', async (route) => {
await route.fulfill({
status: 200,
contentType: 'application/json',
body: JSON.stringify({ message: 'Hello, Mock!' }),
});
});
await page.goto('<https://your-frontend.com>');
const responseText = await page.textContent('#api-response');
expect(responseText).toBe('Hello, Mock!');
});
page.route()를 이용한 요청 차단await page.route('**/*.{png,jpg,jpeg}', (route) => route.abort());
위 코드처럼 특정 리소스(예: 이미지)를 차단할 수도 있습니다.
Vitest는 Jest와 유사하게 함수를 모킹할 수 있습니다.
Vitest에서 vi.fn() 과 vi.mock()은 각각 함수 단위와 모듈 단위의 모킹을 제공하는 기능입니다.
두 개의 차이점을 이해하면 테스트를 더욱 효율적으로 작성할 수 있습니다.
vi.fn()과 vi.mock() 비교| 비교 항목 | vi.fn() |
vi.mock() |
|---|---|---|
| 대상 | 개별 함수 | 모듈 전체 |
| 사용 예 | 특정 함수 호출 추적 및 반환값 조작 | 특정 모듈의 함수 또는 전체를 대체 |
| 호출 추적 | toHaveBeenCalled() 등으로 추적 가능 |
vi.fn()을 사용하여 개별 함수 추적 가능 |
| 비동기 지원 | mockResolvedValue() 사용 가능 |
vi.mock() 내부에서 vi.fn() 사용 가능 |
| 예제 | const mockFn = vi.fn(); |
vi.mock('./api', () => ({})); |
vi.fn()을 이용한 함수 모킹vi.fn() 상세 설명import { vi, test, expect } from 'vitest';
const fetchData = async () => {
return fetch('<https://api.example.com/data>').then((res) => res.json());
};
test('fetchData 함수 모킹', async () => {
global.fetch = vi.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ message: 'Mocked data' }),
})
) as unknown as typeof fetch;
const data = await fetchData();
expect(data.message).toBe('Mocked data');
});
vi.mock()을 이용한 모듈 모킹vi.mock() 상세 설명