shallowMount one level deep

Question

I'm currently working on a Vue.Js project where we have a lot of modal components written like this:

<template>
    <div class="root">
        <MyModal width="650px" height="300px" :hasShadow="false">
          ... some logic that needs to be tested.
        </MyModal>
    </div>
</template>
<script> ... </script>
<style scoped> ... </style>

So essentially, the HTML logic I want to test is one level deep, meaning that I can't use the vue-test-util shallowMount. It would just stub out the MyModal component.

Is there a way in which I can just grab the plain HTML of the vue file itself? I'm thinking of parsing out just the <MyModal>...</MyModal> section and testing it this way:

let myModalHtmlString = getHtmlString(myComponent);            
component = shallowMount(myComponent, {
    propsData: myPropsData,
    store: myStore,
    template: myModalHtmlString
});

Essentially, I'm looking for how getHtmlString() above would work.

score 0 · Answer 1 · answered Aug 31 '18 at 13:28

If you check the documentation of vue-test-utils, you can read that shallowMount stubs the child components but mount doesn't so you can use it. Anyway, I have to question for you to consider it: - why do you create a component just for a root div and another component, is this div really necessary? - if the behaviour you want to test is not related to the parent component but rather to MyModal component, you should test its markup in its test and not in the one of the parent component.

shallowMount one level deep

1 Answers1