Calling method does not change DOM property value (Vue Jest testing-vue-js-applications book)

Question

I am reading the following book Testing Vue js application

the code

<template>
  <div
    :class="{ hidden: isHidden}"
    :style="{
      width: '0%',
    }"
  />
</template>
<script>
export default {
  data() {
    return {
      isHidden: true,
    }
  },
  methods: {
    start() {
      this.isHidden = false;
    },
    finish() {},
  },
};
</script>

the test

test('displays the bar when start is called', () => {
    const wrapper = mount(ProgressBar)       
    expect(wrapper.classes()).toContain('hidden')         
    wrapper.vm.start()      
    expect(wrapper.classes()).not.toContain("hidden");
  })

The test must be passed according to the book but in my case, it does not and I get the following error

expect(array).not.toContain(value)

    Expected array:
      ["hidden"]
    Not to contain value:
      "hidden"

      21 |     // nextTick is used cuz the dom update is happing async
      22 |     // wrapper.vm.$nextTick(() => {
    > 23 |       expect(wrapper.classes()).not.toContain("hidden");
         |                                     ^
      24 |     // });
      25 |  
      26 |   })

but when I nextTick like the following the test passes

wrapper.vm.$nextTick(() => {
  expect(wrapper.classes()).not.toContain("hidden");
});

The only explanation I can find is

nextTick is used cuz the dom update is happing async

Could anyone give me a better explanation?

Does it mean the book material is deprecated?

Eduardo · Accepted Answer · 2021-04-20 12:21:06Z

1

I was reading that book recently. I was writing tests a lot and found out that trick with nextTick is not working for me. In cases when I want to be sure that changes I made to DOM were applied I use async/await. There is my version of your test:

test('displays the bar when start is called', async () => {
    const wrapper = shallowMount(ProgressBar)
    expect(wrapper.classes()).toContain('hidden')   
    await wrapper.vm.start()
    expect(wrapper.classes()).not.toContain('hidden')
  })

About the book: the book is great actually. I could not find more detailed explanation on testing Vue apps in the Internet. Book helped a lot.

answered Apr 20, 2021 at 12:21

Eduardo

1,3311 gold badge8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kick Buttowski Over a year ago

thank you for your answer. I did your trick and did not work for me, but I know base on the doc, it is one the way to do it. I get following error. SyntaxError: /home/izak/vue-hackernews/src/components/__tests__/ProgressBar.spec.js: Unexpected reserved word 'await' (20:4)

Eduardo Over a year ago

I think the problem is that you didn't use 'async' in test function.

Kick Buttowski · Accepted Answer · 2021-04-16 03:15:10Z

0

The issue here is with version dependencies. Each chapter in this book seems to have its own dependencies and versions. If you are going from chapter to chapter, you are probably not rebuilding your node_moduels with every git checkout.

edited Apr 16, 2021 at 3:15

Kick Buttowski

6,74713 gold badges39 silver badges61 bronze badges

answered Apr 16, 2021 at 3:14

Skaman Sam

6264 silver badges15 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 03:21:50Z

0

That's actually an accurate explanation.

However, perhaps the docs provide some more clarity:

In case you haven’t noticed yet, Vue performs DOM updates asynchronously. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. [...]

For example, when you set vm.someData = 'new value', the component will not re-render immediately. It will update in the next “tick”, when the queue is flushed.

edited Jul 16, 2022 at 3:21

answered Apr 15, 2021 at 6:22

tony19

140k23 gold badges281 silver badges354 bronze badges

1 Comment

Kick Buttowski Over a year ago

thank you for your answer but from @sam I realized, in each check out, I must run npm install. Your explanation is valid too.

Collectives™ on Stack Overflow

Calling method does not change DOM property value (Vue Jest testing-vue-js-applications book)

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related