typescript - Kako mockirati metodu pozvanu u `created` Vue lifecycle hook-u u Jest unit testu bez korištenja zastarjelog `methods` parametra u `shallowMount`?


NAPOMENA: Povezano "duplicirano" pitanje i odgovor NE odgovara na moje pitanje, molim glasujte za ponovno otvaranje ili na drugi način objasnite zašto je ovo zatvoreno u komentarima :

Imam created() hootk koji poziva doSomething() metodu. Mogu natjerati testove da prođu tako da proslijedim methods parametar u shallowMount() i zamijenim ga s jest.fn().

Međutim, kada pristupim na ovaj način, dobivam upozorenja o zastarjelosti vezana uz methods:

console.error
[vue-test-utils]: overwriting methods via the `methods` property is deprecated and will be removed in 
the next major version. There is no clear migration path for the `methods` property - Vue does not 
support arbitrarily replacement of methods, nor should VTU. To stub a complex method extract it from 
the component and test it in isolation. Otherwise, the suggestion is to rethink those tests.

TestComponent.Vue:

...

created() {
    doSomething();
}

...

methods: {
    doSomething(): void { /* do something */ }
}

TestComponent.test.ts:

// mounting method used for tests
function genMount() {
    const doSomething = jest.fn();
    const el = document.createElement('div');
    document.body.appendChild(el);

    return shallowMount(TestComponent, {
        localVue,
        methods: { doSomething },  // deprecated param
        store,
        mocks,
        attachTo: el,
        stubs
    });
}

Kako mogu ismockati metodu pozvanu u created() hooku bez prosljeđivanja methods u shallowMount() kako bih riješio upozorenja o zastarjelosti?

Alternativno, postoji li način da se ili imitira ili zaobiđe created() životni ciklusni hak?

Prema prijedlogu upozorenja, shvaćam da bih mogao uvesti metodu i imitirati je za testove, ali tražim alternativu, posebno u slučajevima kada bi to bilo previše.

Odgovor #1

Vau, nisam ni znao da je ovo zastarjelo. Ovo je način na koji sam testirao metode pozvane tijekom mounted također, pa evo što sam otkrio. Osobno ću ubuduće odabrati prvu opciju.

Ako ste spremni promijeniti svoju filozofiju testiranja, ali ne i stil kodiranja:

Pretpostavljam da je rješenje ne testirati jesu li ti metodi pozvani, nego jesu li njihovi učinci primijenjeni. Sve je to u redu, dok se ne bavite DOM-om (gdje Jest/JSDOM u nekim slučajevima ozbiljno nedostaje funkcionalnosti).

Izvor

Ako ste spremni promijeniti svoj stil kodiranja, ali ne i svoju filozofiju testiranja:

Jedno neposredno rješenje koje mi pada na pamet (možda ne idealno) bilo bi staviti spomenutu metodu u drugu datoteku i uvesti je. Tada biste mogli koristiti jest.mock.

Izvor

Netko drugi je preporučio isključivanje pogrešaka:

import { config } from '@vue/test-utils';

config.showDeprecationWarnings = false;

...Ali mislim da bi to moglo izazvati više problema nego što bi riješilo. Ako ne sada, onda kasnije. Osim ako se tvoj projekt ne odluči nikada nadograditi na novije verzije Vue-a, pretpostavljam?

Ovo su jedina rješenja koja sam uspio pronaći. Volio bih da sam mogao pronaći bolji odgovor. Bilo bi lijepo kada bismo mogli stati negdje između created i mounted i mockati metodu, ali nisam siguran postoji li u tom trenutku objekt methods i ne znam kako to saznati.

Povezani članci