Vue Test Utils의 Wrapper 객체

프로퍼티

1. vm

vm은 Vue 인스턴스이며, wrapper.vm으로 vm의 모든 메소드와 프로퍼티에 접근이 가능하다.

1
2

wrapper.vm.count;
wrapper.vm.method();

메소드

1. html

Wrapper DOM 노드의 HTML을 문자열로 반환을 해줍니다. 그래서 태그를 포함한 결과를 반환합니다.

1

expect(wrapper.html()).toBe('<div></div>');

2. text

Wrapper의 text만을 반환해줍니다.

1

expect(wrapper.text()).toBe('문자열');

3. find

선택자에 해당하는 DOM 노드 또는 해당하는 뷰 컴포넌트 중에 선번째 Wrapper를 반환해줍니다.

• Arguments:

  • {string | Component} selector

• Returns: {Wrapper}

1
2

wrapper.find('div');
wrapper.find(Component);

3. findAll

해당 하는 모든 Wrapper를 반환해줍니다.

• Arguments:

  • {string | Component} selector

• Returns: {WrapperArray}

4. exists

해당 Wrapper가 존재하는지 여부를 반환해줍니다.

1

expect(wrapper.exists()).toBeTruthy();

5. contains

Wrapper가 매칭되는 element 또는 컴포넌트를 포함하고 있는지 여부를 반환해줍니다.

1
2

expect(wrapper.contains('div')).toBeTruthy();
expect(wrapper.contains(Component)).toBeFalsy();

6. setData

data에 값을 할당 할수있습니다.

1

wrapper.setData({ data키:값 })

7. setProps

props에 값을 할당 할수있습니다.

1

wrapper.setProps({ prop키:값 })

8. trigger

trigger는 wrapper의 이벤트를 발동시켜줍니다. trigger는 추가적으로 option을 줄수 있습니다.
그리고 trigger의 결과를 테스트 할 때는 wrapper.vm.$nextTick를 이용하여 이벤트가 처리 된 후에 테스트 할수 있습니다.

1
2
3
4

wrapper.trigger('click');
wrapper.trigger('click', {
    ctrlKey: true   // @click.ctrl을 테스트 할수 있다.
})

9. emitted

wrapper의 vm에 의해 발동되어진 커스텀 이벤트를 포함하는 객체를 반환해 줍니다.

1
2
3
4
5
6
7
8

wrapper.vm.$emit('custom');
wrapper.vm.$emit('custom', 123);
wrapper.emitted();
/**
    {
        custom: [[], [123]]
    }
 */

Comment and share