Mocha를 사용한 Vuejs 테스트: 컴포넌트가 요소에 장착되지 않음
저는 VueJ를 사용하여 개발하거나 Mocha를 사용하여 테스트하는 것을 비교적 처음이며(머리 없이 사용) 모든 것을 이해하기 위해 일부러 vue-cli를 사용하지 않습니다.DOM에서 확인해야 할 정도까지 기능하는 유닛 테스트(페치 요구, 소품 가져오기/설정 등)가 있습니다.컴포넌트가 정상적으로 작성되고 있는 것처럼 보이지만 요소에 마운트되어 있지 않습니다.
JSDom을 사용하여 헤드리스 테스트용 DOM 콘텍스트를 만들고 있습니다(내 _setup.js:
global.Vue = require('vue/dist/vue');
require('jsdom-global')('<html><head></head><body><main id="MyApp"></main></body>');
이러한 경우 $el은 정의되지 않습니다.단, 위에서 정의한 DOM 요소를 찾을 수 있습니다.
app.spec.syslog
import assert from 'assert';
import app from '../src/js/app.vue';
describe('app.vue', function() {
describe('#created', function() {
it('should initialize the application', function() {
const vEl = document.getElementById('MyApp');
const vm = new Vue({el: vEl}).$mount();
console.log(vEl); // HTMLElement {}
console.log(vm.$el); // undefined
assert(true); // pass anyway for now
});
});
});
myComp.spec.js:
import assert from 'assert';
import header from '../src/js/components/myComp.vue';
describe('myComp.vue', function() {
describe('#created', function() {
it('should initialize the component', function() {
const Constructor = Vue.extend(myComp);
const comp = new Constructor({
propsData: {
someProp: 'hello world'
}
}).$mount();
console.log(document.getElementById('MyApp')); // HTMLElement {}
console.log(comp.$el) // undefined
assert(true);
});
});
});
요소의 ID를 getElementById 실행 시 존재하지 않는 것으로 변경하면 다음 오류가 발생한다는 점에 유의하십시오.이것은 올바른 ID를 사용할 때 요소에 대한 핸들이 있음을 의미합니다.
// document.getElementById(')IDont Exist' ;
[Vue warn] :구성 요소를 마운트하지 못했습니다. 템플릿 또는 렌더링 함수가 정의되지 않았습니다.
vue-cli를 사용하지 않고 베어본 방식을 사용하므로 구성 요소 정의는 조금 다릅니다.예(간단함을 위해 생략된 일부 코드):
app.vue
import myComp from './components/myComp.vue';
let app = new Vue({
el: '#MyApp',
data: {
someProp: 'hello world'
},
created: function() {},
methods: {}
});
export {app};
myComp.vue
export default Vue.component('my-comp', {
props: ['someProp'],
data: function() {},
created: {},
watch: {},
methods: {},
template: `<div>{{someProp}}</div>`
});
컴포넌트를 DOM에 접속하는 방법이나 컴포넌트에 접속하는 방법에 대해 매우 간단한 것을 간과하고 있는 것 같습니다(단, 문서와 일치하고 있는 것 같습니다.좋은 생각 있어요?
언급URL : https://stackoverflow.com/questions/44443628/vuejs-testing-with-mocha-component-not-mounting-to-element
'programing' 카테고리의 다른 글
| Vuex 스토어를 복사하여 새 스토어로 Import 방법 (0) | 2022.08.15 |
|---|---|
| Vuex 4 및 Vue 3에서 'mapActions' 또는 'mapGetters'를 사용합니다. (0) | 2022.08.15 |
| 최소 2배 값(C/C++) (0) | 2022.08.15 |
| Java에서 타이머를 설정하는 방법 (0) | 2022.08.15 |
| Vuex getter 반환이 정의되지 않음 (0) | 2022.08.15 |