Vue模板在測試中沒有正確綁定

Question

我有一個簡單的按鈕組件，我想用vue-test-utils,mocha-webpack和jsdom來測試。

const Button = { 
    props: { 
    text: {default: 'Save draft'} 
    }, 

    data: function() { 
    return { 
     disabled: false 
    } 
    }, 

    template: ` 
    <input 
     v-bind:value='text' 
     v-bind:disabled='disabled' 
     type='submit' name='save' class='highlight' 
    > 
    ` 
} 

export default Button 

一切都在瀏覽器中正常工作，但沒有我的v-bind屬性在我的測試中被渲染：

describe('Button',() => { 

    it('has the right text',() => { 
    const wrapper = mount(SaveDraftButton, {}) 
    wrapper.update() 
    console.log(wrapper.html()) 

    expect(wrapper.hasAttribute('value', 'Save draft')).to.be.true 
    }) 
}) 

的console.log輸出<input type="submit" name="save" class="highlight">。

非屬性綁定（例如<p>{{ text }}</p>）正常工作。

任何人都可以建議我在這裏做錯了嗎？這似乎是最簡單的事情，我正在反對它。

Answer 1

顯然這是jsdom的feature and not a bug。

解決方法： expect(wrapper.element.value).to.equal('Save draft')