[Vitest] mocking하기

장유진·2024년 4월 30일
0

1. vi.fn()

https://vitest.dev/api/vi.html#vi-fn

vi.fn()을 사용하면 텅 빈 mocking 함수를 만들 수 있다. () => {}가 생성된다고 생각하면 된다.

2. vi.mock()

https://vitest.dev/api/vi.html#vi-mock

vi.mock()을 사용하면 테스트 대상 파일에서 import하여 사용한 함수 또는 객체를 mocking할 수 있다.

2-1. 로컬 파일 default import mocking

// sample.ts
import hello from '../../server/hello';
// sample.test.ts
vi.mock('../hello', () => ({
  default: vi.fn(),
}));

2-2. 로컬 파일 named import mocking

// sample.ts
import { hello } from '../../server/hello';
// sample.test.ts
vi.mock('../hello', () => ({
  hello: vi.fn(),
}));

2-3. 외부 라이브러리 default import mocking

// sample.ts
import cors from 'cors';
// sample.test.ts
vi.mock('cors', () => ({
  default: vi.fn(),
}));

2-4. mocking 후 테스트 코드 작성

vi.isMockFunction을 사용하여 해당 함수가 mocking된 함수인지 확인하면 mocking 관련된 메서드들을 자동완성으로 사용할 수 있다.

import { hello } from '../hello';

describe('hello test', () => {
  beforeAll(() => {
    vi.mock('../hello', () => ({
      hello: vi.fn(),
    }));
  });
  
  test('test', () => {
    vi.isMockFunction(hello) && hello.mockReturnValue(true);
  })
})
profile
프론트엔드 개발자

0개의 댓글