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

    <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
      },
      puted:{
        isLinkPresent(){
          return this.imageTitle.link && this.imageTitle.link !== ''
        }
      }
    }
    </script>

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

    it("renders linked button when image title has a link and is not empty", () => {
  const wrapper = mount(ImageTitle, {
    propsData: {
      imageTitle: Object
    },
    puted: {
      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 |`

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

    <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
      },
      puted:{
        isLinkPresent(){
          return this.imageTitle.link && this.imageTitle.link !== ''
        }
      }
    }
    </script>

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

    it("renders linked button when image title has a link and is not empty", () => {
  const wrapper = mount(ImageTitle, {
    propsData: {
      imageTitle: Object
    },
    puted: {
      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 |`

• javascript
• unit-testing
• vue.js
• jestjs

• What’s ImageTitle? – Zoe Edwards Commented Dec 13, 2018 at 14:07
• @ThomasEdwards it's a prop that im passing it as an object in the ponent like so : MerchandisingImageTitle(:imageTitle="imageTitleData") knowing that imageTitleData is an object : imageTitleData: { image: '', top_title: '', center_title: '', link: '' } – Oumy Commented Dec 13, 2018 at 14:50
• What is the exact error you say you are still getting? – Matti Price Commented Dec 13, 2018 at 15:46
• I mean in your tests what does ImageTitle refer to, not imageTitle? – Zoe Edwards Commented Dec 13, 2018 at 16:06
• @ThomasEdwards yes it refers to the imageTitle, please take a look at the edit i made above – Oumy Commented Dec 13, 2018 at 16:19

2 Answers 2

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)

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

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

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-ponent link="" src="" top_title="" center_title=""