vue-test-utils: wrapper.html does not display v-bind elements

For the record, the reasoning behind removing hasStyle was because it produce a boolean assertion (true/false) and could be achieved by accessing the style property directly:

wrapper.element.style.color

Agreed @38elements . We won’t be implementing this feature because it would require changing the behavior of innerHTML.

I think Vue removes v-bind and v-model inputs from the markup, and manages them internally (for reactivity), so that’s why they are not shown in the wrapper.html(), which is really just wrapper.vm.$el.innerHTML.

I am not sure how hard it would be to implement, maybe impossible. You would have to check any elements in data, for example, then insert the correct value into the markup. This sounds like a pretty big change it how vue-test-utils works, but if it were possible to show all v-model or value bindings in the markup, that would make for awesome snapshot tests.

I wonder how react/enzyme handles this.

Ideally I would want to see this (not just checked, but checked="true")

<input type="checkbox" checked="true">

another thing that would be great to see is something like this

// .vue file
<input v-model="msg">

// test
test("it updates", () => {
  wrapper = shallow(foo)
  wrapper.find("input").setValue("some val")

  expect(wrapper.html()).toMatchSnapshot()

  // snapshot would be <input value="some val">
})

Hm, just tried this out @ATselikovSnp . Regular styles show up, but v-bind ones do not.

We used to have a style method, but it got removed. I think the reasoning was these kind of tests are generally not good practice. At this point, because of how JSDOM and Vue’s binding works, I don’t think you can test what you want.

On alternative is to move the logic into a computed property. This, for example, works:

<template>
  <div>
    <div id="el" v-bind:style="style">Test</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

  props: ["isRead"],

  computed: {
    style() {
      return { 'color': this.isRead ? 'blue' : 'green' }
    }
  }
}
</script>

Test

describe('HelloWorld.vue', () => {
  it('renders color', () => {
    const wrapper = mount(HelloWorld, {
      propsData: {
        isRead: false
      }
    })
    console.log(wrapper.find('#el').element.style)
  })
})

Console.log output:

CSSStyleDeclaration {
        '0': 'color',
        _values: { color: 'green' },
        _importants: { color: undefined },
        _length: 1,
        _onChange: [Function] }

I can do element.style.color and get green.

When the checkbox is checked in browser, , there is not always the checked attribute on input element. This is not bug. I think it is incorrect to change the behavior of wrapper.html().