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的{{3}}。

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

Vue模板在测试

1 个答案: