測試的div茉莉花的WebPack存在，vue.js

Question

在我VUE組件我有代碼，有條件地呈現一個div：

<div v-if="successCriteria()" id="success"> 
    <div class="row"> 
     <div class="col-md-12"> 
    <Commit-chart :data="chartOptions" ></Commit-chart> 
    </div> 
</div> 
</div> 
<div v-else> 
There has been an error with rendering. 
</div> 
</div> 

，我試圖測試這個使用茉莉。例如，當成功標準被滿足時，成功div就存在。這裏是我的測試：

describe('Graph Tests',() => { 
const getComponent = (prop1,prop2) =>{ 
    let vm = new Vue({ 
    template: '<div><graph ref="graph" :label=prop1 :data=prop2></graph></div>', 
    components: { 
     graph, 
    }, 

    }) 
    return vm; 
}  



it('Renders correctly with valid props',() => { 
      const label = ['j', 'a' ,'c', 'k']; 
      const data=[1,2,3,4] 
      var vm = getComponent(label,data).$mount(); 
      console.info(vm.$refs.graph.$el); 
      expect(vm.$refs.graph.$el.querySelector('success')).toBeTruthy(); 
     }); 

     }); 

    } 

當我登錄VM $ refs.graph $ EL我得到：。

INFO: <!----> 

在控制檯

這我感到很困惑。任何人都可以幫我取得ID爲「成功」的div嗎？ 謝謝。

Answer 1

標識爲「成功」的selector爲'#success'。或者您可以使用getElementById。

但是，程序的輸出指示組件根本不呈現。