[JAVA SCRIPT] JEST - MOCKING

 

 

Mocking docs

Jest · 🃏 Delightful JavaScript Testing

 

Mocking : 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을 가짜로 대체하는 기법

- 의존하는 부분을 테스트 코드에서 직접 생성하기가 부담스럽거나 어려운 경우에 많이 사용

 

mock function(가짜 함수) 사용하는 경우

1. test 코드에서 사용하기 위해

2. 모듈 종속성(dependency)을 재정의 하기 위해  

 

 

---

 

 

jest.fn( ) : mock function(가짜 함수) 생성

const setup = (props = {}) => {
        const utils = render(<TodoForm {...props} />);
        const { getByText, getByPlaceholderText } = utils;
        const input = getByPlaceholderText('할 일 입력'); // input 이 있는지 확인
        const button = getByText('등록'); // button이 있는지 확인
        return {
            ...utils,
            input,
            button
        }
    }
    
    // submit 이벤트 관리
    it('calls onInsert and clears input', () => {
        const onInsert = jest.fn(); // 가짜 함수 생성
        const { input, button } = setup({ onInsert });

        // 수정하고
        fireEvent.change(input, {
            target: {
                value: 'TDD 배우기'
            }
        });

        // 버튼 클릭
        fireEvent.click(button);

        expect(onInsert).toBeCalledWith('TDD 배우기'); // onInsert가 'TDD 배우기' 파라미터 호출
        expect(input).toHaveAttribute('value', ''); // input이 비워져야함
    })
})

- fireEvent( ) : onChange 이벤트나 onClick 이벤트를 임의로 생성(실행) 시키고자 할 때 사용

- onInsert 가짜 함수를 생성 후, 임의로 수정하고, 버튼을 클릭하게끔 설정