CODEWITHSUNDEEP
javascriptunit-testingvue.jsjestjs
Oumy
Oumy

Reputation: 81

how can i test a computed property in vuejs using jest?

im still new with unit testing and i want to test if the a linked button is displayed when the isLinkPresent computed property return the link of the image and is not empty of this component :

    <template lang="pug">
    .merchandising_image_title
  .image(:style="`background-image: url('${imageTitle.image}');`" )
  .panel
    .top
      h2 {{imageTitle.top_title}}
      .line
    .center
      h1 {{imageTitle.center_title}}
    .bottom(v-if="isLinkPresent")
      a.btn.round( target='_blank' :href='imageTitle.link') Notify Me By Email
    </template>
    <script>
    export default {
      name: 'MerchandisingImageTitle',
      props: {
        imageTitle: Object
      },
      computed:{
        isLinkPresent(){
          return this.imageTitle.link && this.imageTitle.link !== ''
        }
      }
    }
    </script>

i have tried to test it like this by overwriting the computed property :

    it("renders linked button when image title has a link and is not empty", () => {
  const wrapper = mount(ImageTitle, {
    propsData: {
      imageTitle: Object
    },
    computed: {
      isLinkPresent() {
        return this.imageTitle.link && this.imageTitle.link !== "";
      }
    }
  });
  expect(wrapper.find("a").isVisible()).toBe(true);
});

but it gave me this error:

[vue-test-utils]: find did not return a, cannot call isVisible() on empty Wrapper

  13 |     }
  14 |   });
> 15 |   expect(wrapper.find("a").isVisible()).toBe(true);
     |                            ^
  16 | });

im not sure what am i doing wrong, any help would be appreciated

edit : okay so i realised i didnt pass the propsData correctly so i changed it to propsData: { imageTitle: { imageTitleData: { image: "", top_title: "", center_title: "", link: ""}}} and do expect(wrapper.find(".bottom").exists()).toBe(true) as that isVisible() is used mostly in v-show but still getting this error : ` renders linked button when image title has a link and is not empty

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      20 |     }
      21 |   });
    > 22 |   expect(wrapper.find(".bottom").exists()).toBe(true);
         |                                            ^
      23 | });
      24 |`

Upvotes: 5

Views: 20814

Answers (2)

mfit
mfit

Reputation: 818

There is also the option of testing the property directly on the view model (vm, see Vue2 view instance) that the wrapper provides.

expect(wrapper.vm.isLinkPresent).toBe(true)

Upvotes: 8

Cristi Jora
Cristi Jora

Reputation: 1752

Well you would start first by mounting the component and passing the right props to cover your use case

let wrapper = mount(MyComponent, {
   propsData: {
     imageTitle: {
       link: 'https://google.com'
     }
   }
});

Then you'd check that the link is rendered as expected. You could either use exists or findAll and check the wrapper count.

expect(wrapper.find('.bottom a').exists()).toBe(true) or

expect(wrapper.findAll('.bottom a').length).toEqual(1)

PS: Personal opinion but imho imageTitle should be named to something more intuitive like imageData. Also would be even greater to pass these as individual props. E.g

<my-component link="" src="" top_title="" center_title=""

Upvotes: 2

Related Questions