Vue 유닛 테스트 에 관 한 몇 개의 구 덩이 를 상세 하 게 설명 합 니 다.
이 글 의 코드 는 karma,mocha,chai,sinon-chai 를 사용 하여 Vue 의 인 스 턴 스 속성 에 맞 춰 유닛 테스트 를 진행 합 니 다.
2.전체적인 구성 요소 의 구덩이
제 g-icon 은 전역 적 으로 등록 되 어 있 기 때문에 g-input 구성 요 소 를 사용 할 때 g-icon 은 직접 사용 하기 때문에 테스트 할 때 icon 과 관련 된 코드 는 영원히 틀 립 니 다.
g-icon 부분 등록 구성 요소
3.테스트 중 클릭 이벤트 발동
app.vue 에서 g-input 구성 요 소 를 사용 하 는 것 을 모 의 합 니 다.
<g-input v-model="message"></g-input>
it(" ", () => {
["change", "input", "focus", "blur"].forEach(eventName => {
vm = new Constructor({}).$mount();
const callback = sinon.fake();
vm.$on(eventName, callback);
let event = new Event(eventName);
Object.defineProperty(event, "target", {
value: { value: "hi" },
enumerable: true
});
let inputElement = vm.$el.querySelector("input");
inputElement.dispatchEvent(event);
expect(callback).to.have.been.calledWith("hi");
});
});value:{value:"hi"}첫 번 째 value 는 define Property 입 니 다.
4.Vue 버 전
구 덩이 는 다음 코드 에서 나온다.
it(" gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
<g-row gutter="20">
<g-col></g-col>
<g-col></g-col>
</g-row>`;
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});template 옵션 이 없 으 면 엘 은 바 꾸 지 않 습 니 다.
5.비동기 테스트
아니면 이 코드 입 니까?먼저 두 구성 요소 의 관 계 를 테스트 합 니 다.
it(" gutter", function(done) {
Vue.component("g-row", Row);
Vue.component("g-col", Col);
const div = document.createElement("div");
document.body.appendChild(div);
div.innerHTML = `
<g-row gutter="20">
<g-col></g-col>
<g-col></g-col>
</g-row>`;
const vm = new Vue({
el: div
});
setTimeout(() => {
const row = vm.$el.querySelector(".row");
expect(getComputedStyle(row).marginRight).to.eq("-10px");
expect(getComputedStyle(row).marginLeft).to.eq("-10px");
const cols = vm.$el.querySelectorAll(".col");
expect(getComputedStyle(cols[0]).paddingRight).to.eq("10px");
expect(getComputedStyle(cols[1]).paddingLeft).to.eq("10px");
done();
vm.$el.remove();
vm.$destroy();
}, 0);
});created 와 mounted 갈고리 에 대해 말하자면 createElement 와 append Child 는 js 코드 에서 동기 화 되 고 두 개의 갈 고 리 는 각각 이 두 개의 코드 후에 실행 되 며 갈 고 리 는 비동기 적 으로 실 행 됩 니 다.
g-row 구성 요소 에 mounted 갈고리 가 있 기 때문에 비동기 검 사 를 해 야 합 니 다.그렇지 않 으 면 new Vue 이후 에 바로 테스트 를 해 야 합 니 다.갈 고 리 는 아직 완성 되 지 않 았 습 니 다.
mocha 비동기 테스트
mocha 는 기본적으로 비동기 가 실행 되 지 않 습 니 다.done 인 자 를 추가 하고 done()를 호출 하면 됩 니 다.
쓰레기 회수
모든 테스트 가 끝 난 후에 다음 두 개의 코드 를 써 야 한다.
vm.$el.remove();
vm.$destroy();
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div. remove()
}, 3000)함수 가 전역 변수 div 의 onlick 에 인용 되 었 습 니 다.
div.remove()는 페이지 에서 만 삭제 되 었 을 뿐 메모리 에서 삭제 되 지 않 았 습 니 다.
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
div = mull
}, 3000)
var div = document. getElementById('xxx')
div.onclick = function() {
///code
}
setTimeout(function(){
var div2 = document. getElementById('xxx')
}, 3000)
i.bug 가 있 습 니 다.그래도 지 울 수 없습니다.div.onlick=null 가능 합 니 다.
Vue 유닛 테스트 에 관 한 몇 개의 구덩이 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 유닛 테스트 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
