[javascript] Svelte에서 테스트(mocking)를 어떻게 할 수 있나요?

24 Nov 2023

javascript

Svelte에서 테스트하기 위해 다양한 모델(mocking)을 사용할 수 있습니다. 이를 통해 테스트 환경에서 컴포넌트의 동작을 완전히 제어하고, 외부 종속성 없이 실행할 수 있습니다. 다음은 Svelte 컴포넌트를 테스트하기 위한 몇 가지 모델링 방법입니다.

1. Svelte Testing Library

Svelte Testing Library는 Svelte 애플리케이션 및 컴포넌트의 테스트를 위한 유용한 도구입니다. 이 라이브러리는 사용자 상호 작용을 시뮬레이션하고, 컴포넌트의 상태와 프로퍼티를 확인하며, DOM에 대한 테스트를 수행하는 데 도움을 줍니다. 또한, 실제 네트워크 호출을 실제 API 호출 대신 가짜(mock) 서비스를 사용하여 모의(mock)할 수 있습니다.

import { render, screen, fireEvent } from '@testing-library/svelte';
import MyComponent from './MyComponent.svelte';
import { mockService } from './mocks/service'; // mock service

jest.mock('./service', () => mockService); // use mock service

test('renders component properly', async () => {
  render(MyComponent);

  // perform some user interactions
  fireEvent.click(screen.getByRole('button'));

  // assert component's state or UI changes
  expect(screen.getByText('Button clicked!')).toBeInTheDocument();
});

2. 직접 생성되는 mock

다른 방법으로는 모의(mock) 객체를 직접 생성하는 것이 있습니다. 이를 통해 API 호출, 외부 라이브러리 등을 대체하여 테스트 수행할 수 있습니다. 여기에는 jest와 같은 테스트 프레임워크를 사용하여 모의(mock) 객체를 생성하는 방법이 포함됩니다.

import { jest } from '@jest/globals';
import MyComponent from './MyComponent.svelte';
import { ApiService } from './services/api'; // actual API service

jest.mock('./services/api'); // mock API service

test('renders component properly', async () => {
  const mockApi = new ApiService(); // create mock API service

  mockApi.getData.mockResolvedValue({ message: 'Hello!' }); // mock API response

  const app = new MyComponent({
    target: document.body,
    props: {
      apiService: mockApi // inject mock API service as a prop
    }
  });

  expect(mockApi.getData).toHaveBeenCalled();

  app.$destroy();
});

Svelte에서 테스트(mocking)를 수행하는 방법은 여러 가지가 있습니다. 위의 예제는 이를 수행하는 가장 일반적인 방법 중 일부를 보여줍니다. Svelte Testing Library 또는 모의(mock) 객체를 직접 생성하여 효과적인 테스트를 수행할 수 있습니다. 프로젝트의 특정 요구 사항과 선호도에 따라 적절한 방법을 선택하십시오.