Come attivare un evento con Vue Test Utils su un elemento BootstrapVue?

cezar 2020-03-05 09:17.

Questo problema mi mette in difficoltà e non riesco a capire come far funzionare Vue Test Utils e BootstrapVue insieme.

Un esempio minimo sarebbe simile a questo:

MyComponent.vue

<template>
  <div>
    <b-button variant="primary" @click="play">PLAY</b-button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  methods: {
    play() {
      console.log("Let's play!");
    }
  }
}
</script>

Nel main.jsusiamo BootstrapVue : Vue.use(BootstrapVue).

Questo è il modo in cui cerco di verificare che l' clickevento sia stato attivato:

import { expect } from 'chai';
import sinon from 'sinon';
import Vue from 'vue';
import { shallowMount, createLocalVue } from '@vue/test-utils';
import BootstrapVue, { BButton } from 'bootstrap-vue';
import MyComponent from '@/components/MyComponent.vue';

const localVue = createLocalVue();
localVue.use(BootstrapVue);

describe('MyComponent.vue', () => {
  it('should call the method play when button is clicked', () => {
    const playSpy = sinon.spy();
    const wrapper = shallowMount(MyComponent, {
      localVue,
      methods: {
        play: playSpy,
      },
    });
    wrapper.find(BButton).trigger('click');
    expect(playSpy.called).to.equal(true);
  });
});

Questo mi dà:

  AssertionError: expected false to equal true
  + expected - actual

  -false
  +true

Ho controllato Come verificare l'esistenza di un componente vue bootstrap in unit test con jest? , ma non si applica a BButton.

Durante l'esecuzione del test, inoltre, non vedo alcun output sulla riga di comando, dove mi aspetto che venga eseguita questa riga:

console.log("Let's play!");

Cosa c'è che non va qui?

javascript vue.js dom bootstrap-vue vue-test-utils

2 answers

cezar 2020-03-05 18:54.

Il motivo per cui clicknon è stato possibile attivare l'evento è il modo in cui shallowMountfunziona in contrasto con mount.

Come sappiamo, Vue Test Utils fornisce due metodi per montare un componente, ovvero eseguire il rendering del modello e generare un albero DOM:

montare
shallowMount

Il primo metodo mountgenera un albero DOM completo e attraversa tutti i componenti figlio. Il più delle volte questo non è necessario, quindi il metodo shallowMountè preferito: stub i componenti figlio solo un livello sotto il componente genitore.

Nel mio caso questa era anche la radice del problema. BootstrapVue fornisce componenti, come BButton, che possono essere utilizzati nei tuoi modelli Vue. Ciò significa che nel seguente modello:

<template>
  <div>
    <b-button variant="primary" @click="play">PLAY</b-button>
  </div>
</template>

il pulsante b è un componente figlio, che viene interrotto quando viene utilizzato shallowMountnegli unit test per il nostro componente. Questo è il motivo per cui non riusciamo a trovare un pulsante elemento:

const wrapper = shallowMount(MyComponent);
wrapper.find('button'); // won't work

Possiamo trovare il componente figlio in questo modo:

wrapper.find(BButton); // BButton has to be imported from bootstrap-vue

ma se proviamo a produrre l'elemento renderizzato:

console.log(wrapper.find(BButton).element);

otterremo:

HTMLUnknownElement {}

Il BButtoncomponente come figlio non è stato completamente renderizzato e non c'è alcun buttonelemento nell'albero DOM. Ma quando usiamo mountabbiamo questo comportamento:

const wrapper = mount(MyComponent);
console.log(wrapper.find(BButton).element);

otterremo:

HTMLButtonElement { _prevClass: 'btn btn-primary' }

Vediamo che mountha reso il componente figlio. Quando usiamo mountpossiamo accedere direttamente buttonall'elemento:

wrapper.find('button');

Ora che abbiamo il buttonpossiamo attivare un evento simile click.

Spero che questo aiuti anche altri principianti. Gli esempi sono molto semplificati, non dimenticare di creare localVueusando createLocalVuee passarlo al mountmetodo come illustrato nella domanda.

Quando usi BootstrapVue pensa molto attentamente a quale metodo di montaggio hai bisogno.

mikeapr4 2020-10-13 18:40.

Mentre shallowMountstai ancora eseguendo un dovresti essere in grado di farlo:

wrapper.find(BButton).vm.$listeners.click();

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: tutto ciò che ha detto sull'amore e sulla sua finestra di 5 anni per trovare "l'unico"

Jana Duggar è stata aperta sulla sua ricerca dell'amore. Ecco tutto ciò che ha detto sull'argomento e sulla sua finestra di cinque anni per il matrimonio.

2023-06-12.

Sam Heughan sa esattamente cosa prenderà dal set di 'Outlander': 'Mi sento come se fossi Jamie quando li indosso'

La star di 'Outlander' Sam Heughan ha recentemente rivelato cosa prenderà dal set per ricordare Jamie Fraser, il ruolo che lo ha reso una star.

2023-06-12.

La canzone dei primi Beatles che è stata una delle "esibizioni più entusiasmanti" della band, secondo un membro dei Fab Four

"She Loves You" è stata scritta in un'ora, registrata in un giorno ed è stata la canzone dei Beatles con una delle loro migliori performance della loro carriera.

2023-06-11.

Dolly Parton ha aiutato sua nonna "invalida" quando nessuno degli altri nipoti l'avrebbe fatto: le faceva anche uno scherzo

Dolly Parton e sua nonna Bessie avevano un rapporto speciale. Nonna Parton era molto malata, ma questo non ha impedito a Dolly di farle uno scherzo.

2023-06-11.

10 delle creature marine più spaventose che si nascondono nelle profondità dell'oceano

L'oceano è pieno di bellezza, ma nasconde anche alcune delle creature marine più spaventose del pianeta. Molti di questi animali si nascondono molto al di sotto della superficie dell'oceano, nel mondo oscuro e ad alta pressione delle profondità marine.

2025-10-29.

I 10 migliori incantesimi per le spade in Minecraft

Se stai combattendo contro nemici ostili o ti stai preparando per scenari PvP, conoscere i migliori incantesimi per le spade offerti da Minecraft può darti un vantaggio notevole. Incantare le spade ti permette di infliggere più danni, aumentare il numero di nemici che cadono e aumentare la durata della tua spada.

2025-10-29.

Il furgone delle consegne di Amazon prende fuoco in un'esplosione di fuoco durante la calura estiva di Houston

Le riprese dei droni hanno ripreso i vigili del fuoco che sembravano lottare per spegnere l'incendio.

2024-07-03 19:04.

Lo spettacolo Black Panther della Marvel sarà lo spettacolo animato più cruciale di sempre

Eyes of Wakanda si collega direttamente al MCU, oltre ad aggiornamenti su X-Men '97, What If..., Daredevil e altro ancora.

2024-07-03 19:03.

La storia sentimentale di Ava Gardner: uno sguardo ai matrimoni e alle storie d'amore dell'icona di Hollywood

Ava Gardner avrebbe dovuto sposarsi con Mickey Rooney e Frank Sintra, e frequentare diverse altre star di Hollywood. Ecco uno sguardo alla storia sentimentale di Ava Gardner.

2024-06-23.

3 modi comprovati per migliorare la tua abilità di scrittura

I vantaggi della scrittura e le strategie per aiutarti a farlo

Nel 2022, con il rilascio di GPT-3, l'abilità di scrittura sembra diventare meno importante. Con l'intelligenza artificiale, anche le persone con una scrittura scadente possono generare personale di qualità.

La lenta erosione: svelare i modi in cui le persone deperiscono nella loro carriera

Nel mondo frenetico e competitivo di oggi, la propria carriera gioca un ruolo significativo nella crescita personale, nella stabilità finanziaria e nella soddisfazione generale della vita. Tuttavia, molte persone si trovano intrappolate in un ciclo inesorabile di stagnazione e insoddisfazione, che si esauriscono gradualmente nella loro vita professionale.

Cosa rende influente un podcast?

La scorsa settimana ho notato un comunicato stampa, inviato tramite PressGazette (un sito Web di notizie sui media britannici). L'articolo annunciava che Acast, la società di hosting e pubblicità di podcast di Scandi, avrebbe guidato un consorzio di editori "probabilmente i più influenti" nel podcasting.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

Come attivare un evento con Vue Test Utils su un elemento BootstrapVue?

2 answers

Related questions

MORE COOL STUFF

Jana Duggar: tutto ciò che ha detto sull'amore e sulla sua finestra di 5 anni per trovare "l'unico"

Sam Heughan sa esattamente cosa prenderà dal set di 'Outlander': 'Mi sento come se fossi Jamie quando li indosso'

La canzone dei primi Beatles che è stata una delle "esibizioni più entusiasmanti" della band, secondo un membro dei Fab Four

Dolly Parton ha aiutato sua nonna "invalida" quando nessuno degli altri nipoti l'avrebbe fatto: le faceva anche uno scherzo

Qual è il legno più duro del mondo?

10 delle creature marine più spaventose che si nascondono nelle profondità dell'oceano

I 10 migliori incantesimi per le spade in Minecraft

13 Paesi socialisti molto diversi tra loro

Il riepilogo di Bear: Marcus è l'uomo più gentile, tenero e sincero di Chicago?

A $ 9.800, li metteresti dentro in questa Toyota RAV4 del 2008 a sette posti?

Il furgone delle consegne di Amazon prende fuoco in un'esplosione di fuoco durante la calura estiva di Houston

Lo spettacolo Black Panther della Marvel sarà lo spettacolo animato più cruciale di sempre

La storia sentimentale di Ava Gardner: uno sguardo ai matrimoni e alle storie d'amore dell'icona di Hollywood

Chi è la moglie di John Cleese? Tutto su Jennifer Wade

Chi è la ragazza di Dev Patel? Tutto su Tilda Cobham-Hervey

Cronologia della relazione tra Garth Brooks e Trisha Yearwood

i pronomi sono super spaventosi

3 modi comprovati per migliorare la tua abilità di scrittura

I vantaggi della scrittura e le strategie per aiutarti a farlo

La lenta erosione: svelare i modi in cui le persone deperiscono nella loro carriera

Cosa rende influente un podcast?

Language