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

[ykhirao]

Version

1.0.0-beta.20

Reproduction link

https://codesandbox.io/s/x3p3725mm4

Steps to reproduce

Could you see Todo.spec.js file, and run the test.

In the console, checked is not displayed in wrapper.html() .

What is expected?

<div>
  <input type="checkbox" checked>
  <span>Hello from data</span>
</div>

What is actually happening?

<div>
  <input type="checkbox">
  <span>Hello from data</span>
</div>

---

I want to show checked in the html.

[lmiller1990]

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">
})

[38elements]

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().

[eddyerburgh]

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

[ATselikovSnp]

But how can i access style in tests?
This is my component code:
<div class="comment-left-side" v-bind:style="isRead ? '' : {backgroundColor: 'lightyellow'}"></div>
And if I call

templateForWrapper.propsData = Object.assign(templateForWrapper.propsData,{isRead:false});
const wrapper = mount(DealComment, templateForWrapper);
console.log(wrapper.find('.comment-left-side').html())

,
it would return html without style. And how should I test that this div does really have a background-color set to 'lightyellow', when I pass isRead=false prop?

[lmiller1990]

@ATselikovSnp It's just a regular HTML element, so you can check it the normal way, something like wrapper.find('.comment').element.style or something along these lines.

[ATselikovSnp]

@lmiller1990 I wrote in my upper comment 'that it would return html without style'. And writing like that wrapper.find('.comment').element.style returns an object, but if I acess 'backgroundColor' property of it it's empty.

[lmiller1990]

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.

[eddyerburgh]

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

[themathmagician]

I am having trouble getting the styles out:

const button = wrapper.find('button')
console.log(button.text())
const style = button.element.style
console.log(button.element.style)

results in :
EXPERIMENTAL
CSSStyleDeclaration {
_values: {},
_importants: {},
_length: 0,
_onChange: [Function] }

The styles are empty?

[tschoartschi]

I have the same problem as @themathmagician is there any solution for styles which are applied with v-bind:style?

[lmiller1990]

I do not believe anything has changed since this issue was raised - is the work around to use a computed value suggested above an option in your use case? I don't know of the top of my head but I am guessing the reason v-bind:style={{ }} does not work is the same as the original issue raised.