Custom elements should not be stubbed

[aguingand]

Version

1.0.0-beta.26

Reproduction link

https://codesandbox.io/s/8ynwwjm880?module=%2Ftest%2Fshallow-mount.spec.js&previewwindow=tests

Steps to reproduce

Go to the reproduction link, bump @vue/test-utils version to 1.0.0-beta.26, see the test failing

What is expected?

Default Vue behaviour with custom element

What is actually happening?

The custom element is stubbed thus not rendered properly and loose attached DOM listeners

[eddyerburgh]

I'll revert it to the original behavior where elements that can't be resolved are not stubbed

[Mboulianne]

@eddyerburgh I have a question regarding this fix.
In our case we were very interested in auto-stubbing. We wanted to stub every components / custom elements even if they are not registered the stubs array passer to the wrapper.

Right now we end up having deep rendered child components (because they are not stubbed) even if we use shallowMount

So it would be nice to have a property in the config which allow us to choose what we want as a default behaviour for child components / stubs rendering

test mounting code:
const initialiserWrapper: Function = (): void => { wrapper = shallowMount(PGestionnaireProgrammeCohorteListe, { methods: getDefaultMethods(), mocks: obtenirMocks(), propsData: { idProgramme } }); };

Component HTML
<p-page-administration-liste class="m-u--margin-top--l" :colonnes="colonnes" :est-formulaire-ajout-ouvert.sync="estFormulaireAjoutOuvert" :en-chargement="enChargement" :items="listeCohortesCourante" :nb-total-items="nbTotalCohortes" :btn-ajouter-libelle="i18nAjouterCohorte" :enregistrement-en-cours="enregistrementEnCours" :operations="operations" :titre="i18nTitre" :confirmation-suppression="i18nBoutonSupprimerCohorte" :titre-suppression="i18nTitreFenetreSupprimerCohorte" @paginer="chargerCohortes" @formulaire-charge="onFormulaireCharge" @supprimer="onSupprimer" ref="liste"> <p-cohorte-identification-formulaire slot="formulaire-ajout" :est-formulaire-charge.sync="estFormulaireCharge" @submit="soumettre" ref="formulaire"> </p-cohorte-identification-formulaire> <template slot="body.nom" scope="{data}"> <m-link :url="obtenirUrlDetailCohorte(data)">{{ data.nom }}</m-link> </template> <template slot="consigneSuppression" slot-scope="{ elementSelectionne }"> <span v-html="obtenirConsigneSuppression(elementSelectionne)"></span> </template> </p-page-administration-liste>

output using vue test utils 25
<p-page-administration-liste-stub colonnes="[object Object],[object Object]" enChargement="true" items="" chargerItemListeAdmin="function () {}" operations="[object Object]" taillePage="25" titre="formation:cohorte.p" btnAjouterLibelle="formation:ajouter-cohorte" titreSuppression="messages:f20032" confirmationSuppression="formation:supprimer-cohorte" recherchePlaceholder="" confirmationAjouterTitre="" confirmationAjouterLibelleConfirme="" class="m-u--margin-top--l"> <p-cohorte-identification-formulaire-stub nom=""></p-cohorte-identification-formulaire-stub> </p-page-administration-liste-stub>

output using vue test utils 26

  <div class="m-table-header p-page-administration-liste__entete">
    <div>
      <h2>formation:cohorte.p</h2>
      <div class="p-page-administration-liste__recherche"></div>
    </div>
    <div class="m-table-header__spacer"></div>
    <div class="p-bouton-ouverture-formulaire">
      <a href="#" tabindex="0" aria-controls="p-bouton-ouverture-formulaire-8f541638-4c6c-418a-9812-65676ef6f15b" aria-haspopup="true" class="m-link p-bouton-ouverture-formulaire__lien m--is-unvisited m--is-button m--has-left-icon">
        <svg aria-hidden="true" width="22px" height="22px" class="m-icon m-link__icon">
          <use aria-hidden="true"></use>
        </svg> <span class="m-link__text">formation:ajouter-cohorte</span> </a>
      <div id="p-bouton-ouverture-formulaire-8f541638-4c6c-418a-9812-65676ef6f15b">
        <div class="m-modal"> </div>
      </div>
      <div aria-hidden="true" class="m-dialog p-message-confirmation"> </div>
    </div>
  </div>
  <table cellspacing="0" class="m-table m--is-skin-regular m--is-loading">
    <thead>
      <tr>
        <th scope="col" style="width:15%;"><span class="m-table__header-name">formation:code</span></th>
        <th scope="col"><span class="m-table__header-name">commun:titre-formulaire</span></th>
      </tr>
    </thead>
    <tbody>
      <tr class="m-table__loading">
        <td colspan="2">
          <div class="m-progress m--is-indeterminate m--is-in-progress" style="height:6px;border-radius:initial;">
            <div class="m-progress__bar" style="width:0%;border-bottom-left-radius:initial;border-top-left-radius:initial;"></div>
          </div>
        </td>
      </tr>
      <tr class="m-table__message">
        <td colspan="2">
          <p>m-table:loading</p>
          <p class="m-table__message__precision">m-table:please-wait</p>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2"></td>
      </tr>
    </tfoot>
  </table>
  <div aria-hidden="true" class="m-dialog p-message-confirmation"> </div>
</div>````

[eddyerburgh]

@Mboulianne you could pass explicit stubs with the stubs option:

shallowMount(TestComponent, {
  stubs: {
    ComponentToBeStubbed: { template: '<div /> }
  }
})

[Mboulianne]

Well it's confusing considering the fact that I use shallowMount, is it not?
It should render empty HTML or auto stub the components no?

[LinusBorg]

It should render empty HTML or auto stub the components no?

It does for Components, not for custom elements. That's intended.

If you experience something different, please submit a real bug report in a fresh issue.

And look up how to properly highlight code here: https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown