[Jest] 간단한 유닛 테스트(feat.setTimeout())

CRA(create-react-app)으로 프로젝트를 준비하면 이미 jest가 포함되어 있습니다.

최상위에 test 폴더를 만들어서 test 폴더 하위에 filename.test.js로 파일을 만듭니다.

debounce 함수를 테스트해볼 건데요. setTimeout 함수를 사용합니다.

 

호출 목적은 setTimeout에 지정한 시간보다 이르게 debounce 함수가 호출됐을 때

callback 함수가 호출되지 않도록 하는 것입니다.

1000번이 호출돼도 지정 시간보다 빠르게 호출되었으면 결과적으로 한 번만 호출되어야 합니다.

 

import { debounce } from '../component/utils/debounce';

jest.useFakeTimers();

describe('test debounce()', () => {
    let func;

    beforeEach(() => {
        func = jest.fn();
    });

    test('should execute only one', () => {
        for (let i = 0; i < 1000; i++) {
            debounce(func, 100);
        }
        jest.runAllTimers(); // exhaust all pending tasks
        expect(func).toBeCalledTimes(1);
    });
});

jest.useFakeTimers(공식문서)

이 함수를 호출하면 jest에서 제공하는 시간 함수를 사용합니다.

실제가 아니라 가짜 시간이기 때문에 빠른 테스트를 도와줍니다.

 

describe(공식문서)

연관 있는 테스트 항목을 여러 개 넣거나 관련한 코드들을 그룹화할 때 사용합니다.

이 예제에선 굳이 안 넣어도 됩니다.

 

beforeEach(공식문서)

각 test()가 호출되기 전에 수행됩니다.

 

jest.runAllTimers(공식문서)

pending 되어 있던 작업들을 실행시킵니다.

예제에서는 debounce가 1000번을 호출했고 이것이 큐 태스크에 pending되어 있다가

runAllTimers()가 호출되면서 실행됩니다.

 

expect(func).toBeCalledTimes(1)

기능이 이름에서 유츄될 겁니다. func 함수가 몇 번 호출됐는지 확인합니다.

debounce는 특정 시간 안에 debounce가 다시 호출되면 콜백 함수가 호출되지 않아야 합니다.

테스트 목적이 지정한 시간 이내에 1000번 호출했을 때 1번만 호출되는지 확인하는 것이었습니다.