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 한다.
다음과같이 테스트한다.
'Angular.js' 카테고리의 다른 글
TDD라이브러리 세가지 (0) | 2020.09.16 |
---|---|
비동기 처리 (0) | 2020.08.21 |
Angular.js Routing Parameter전달 (0) | 2020.08.10 |
Visual Studio Code 에서 Tab키가 정상작동 하지 않을경우 (1) | 2020.08.10 |
Angular http 통신 등의 결과를 subscribe로 받아올때 에러가 return된다면? (0) | 2020.08.04 |