본문 바로가기

Angular.js

테스트 방법 ( jest + Enzyme)

describe ('테스트이름' , {} =>{
	let wrapper;
    //테스트가 수행될떄마다 렌더링을 해주는것이 좋은 테스트이기때문에 BeforeEach()를 만듬
	//컴포넌트를 불러온다. (mount함수와 shallow함수를 씀)
	beforeEach( ()=>{
    	wrapper = shallow ( <AddToDo> </AddToDo> )
    })
    //테스트1
	if(' TextInput버튼 있어?? ' () => {
    	expect(wrapper.find ('TextInput')). toHaveLength(1);
    })
    //테스트2
    if(' Button 버튼 있어? ' () =>{
    	expect(wrapper.find( 'Button')).toHaveLength(1);
    })
})


describe ('버튼의 활성화' , {} =>{
	props = {
    	onAdded: test.fn()
    }
	beforeEach( ()=>{
    	wrapper= shallow(<AddToDo></AddToDo>)
        wrapper.find('TextInput').simulate('changeText','텍스트텍스트')
        //버튼의 prop(행동)
        wrapper.find('button').prop('onPress'){}
    })
    
    if( 'onAdded버튼누를시 인풋텍스트가 잘되나' ), ()=>{
    	expect( (props.onAdded).toHaveBeenCalledTimes(1);
        expect( (props.onAdded).toHaveBeenCallTextWith('텍스트텍스트');
    
    })

})

EnZyme 을 이용한 컴포넌트 테스트

 

 

AddToDo.js 를 만들고  AddToDo 라고 컴포넌트 이름을 짓는다.

 

AddToDo.spec.js 라는 테스트용 js 파일을 만들어 AddToDo 를 import 한다.

다음과같이 테스트한다.