138. find()를 이용한 컴포넌트 HTML 검색

1. LoginFrom.spec.js 

- idinput.html()

import loginFrom from './LoginForm.vue';
// import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';

describe('loginFrom.vue', () => {
  test('컴포넌트가 마운팅되면 username이 존재하고 초기 값으로 설정되어 있어야한다.', () => {
    const wrapper = shallowMount(loginFrom);
    // vm = 인스턴스
    expect(wrapper.vm.username).toBe('');
  });

  test('ID는 email 형식이어야 한다', () => {
    const wrapper = shallowMount(loginFrom);

    // find() 는 LoginFrom 컴포넌트가 화면에 부착되었을때 템플릿 안에있는 태그,
    // 특정 HTML 요소를 쫒아갈수있는 특정 API이다.
    const idinput = wrapper.find('#username');
    console.log(idinput.html());
  });
});

---

2. LoginFrom.spec.js

- idinput.element.value

import loginFrom from './LoginForm.vue';
// import Vue from 'vue';
import { shallowMount } from '@vue/test-utils';

describe('loginFrom.vue', () => {
  test('ID는 email 형식이어야 한다', () => {
    const wrapper = shallowMount(loginFrom, {
      data() {
        return {
          username: 'test',
        };
      },
    });
    // find() 는 LoginFrom 컴포넌트가 화면에 부착되었을때 템플릿 안에있는 태그
    // 특정 HTML 요소를 쫒아갈수있는 특정 API이다.
    const idinput = wrapper.find('#username');
    console.log(idinput.element.value);
  });
});