Pruebas de integración con Vue

Excelente, comparto el código jaja principalmente para evitar que un compañero pueda cometer errores:

describe('Validar Cambios', () => {
    const btn = wrapper.find('button')
    btn.trigger('click')

    test('should change name', async () => {
        expect(nameTag.text()).not.toContain('name')
        await wrapper.vm.$nextTick()
            .then( () => { 
                expect(nameTag.text()).not.toBe(lastNameValue)
             })
    })

    test('should change name', async () => {
        expect(imgTag.attributes().src).not.toBe('')
        await wrapper.vm.$nextTick()
            .then( () => { 
                expect(imgTag.attributes().src).not.toBe(lastImgValue)
             })
    })

    test('should change name', async () => {
        expect(typeTag.attributes().src).not.toBe('')
        await wrapper.vm.$nextTick()
            .then( () => { 
                expect(typeTag.attributes().src).not.toBe(lastTypeValue)
             })
    })

    test('should change name', async () => {
        expect(weightTag.attributes().src).not.toBe(0)
        await wrapper.vm.$nextTick()
            .then( () => { 
                expect(weightTag.attributes().src).not.toBe(lastWeightValue)
             })
    })

    test('should change name', async () => {
        expect(heightTag.attributes().src).not.toBe(0)
        await wrapper.vm.$nextTick()
            .then( () => { 
                expect(heightTag.attributes().src).not.toBe(lastHeightValue)
             })
    })

    test('should change name', async () => {
        expect(abilitiesTag.attributes().src).not.toBe([])
        await wrapper.vm.$nextTick()
            .then( () => { 
                expect(abilitiesTag.attributes().src).not.toBe(lastAbilitiesValue)
             })
    })
})

¿Por qué se usa el then junto con el await? El await ya espera a que la promesa se resuelva y lanza error si algo falla

No me quedó claro algunas cosas:

1. Dónde se usó shallowMount?
2. Cuál es el callback que recibe $nextTick?
3. Por qué se usa await y then juntos?
4. Por qué comparan el componente con el valor del mismo componente vacío (expect(nameTag.text()).not.toBe(lastNameValue))?
5. No veo la Integración de estas pruebas, parece más bien como si estuviera haciendo una prueba unitaria.

Hola, no es necesario usar el then luego del nextThick pues al hacer await al promise puedes continuar usando matches sin necesidad de hacerlo dentro del callback del then y asi queda mas limpio el codigo

Hay solo ciertas partes que no entiendo, por ejemplo:

1.- ¿Exactamente qué hace esto? expect(nameTag.text()).not.toContain('name')
2.- no entiendo muy bien por qué usar el $nextTick, es decir, no se supone que al llamar al trigger ya se hacen esos cambios?

Funciona correctamente el código, solo me marca warnings, buena clase 😄

La única duda que me quedó fué con el

request.spec.js

es el único que me marca error

Muy buena clase!

Esta es mi solución, si coloco el evento del click fuera del test me da error

//Archivo para realizar pruebas de integracion
import { mount } from '@vue/test-utils'
import App from './../../src/App.vue'

describe('Realizando pruebas de funcionamiento de la app', () => {
    //const createdSpy = jest.spyOn(App, 'created')
    const wrapper = mount(App)

    //Comprobando que la funcion created sea llamada por lo menos 1 vez
    /*test('Funcion created es llamada', ()=> {
        const createdSpy = jest.spyOn(App, 'created')
        const wrapper = mount(App)
        expect(createdSpy).toHaveBeenCalled()
    });*/
   

    //Estado inicial de la aplicacion
    const nameTag = wrapper.find('.pokemon-name')
    const lastNameValue = nameTag.text()
    const imgTag = wrapper.find('img')
    const lastImgValue = imgTag.attributes().src
    const typeTag = wrapper.find('#type')
    const lastTypeValue = typeTag.text()
    const weightTag = wrapper.find('#weight')
    const lastWeightValue = weightTag.text()
    const heightTag = wrapper.find('#height')
    const lastHeightValue = heightTag.text()
    const abilitiesTag = wrapper.find('ul')
    const lastAbilitiesValue = abilitiesTag.text()

    /*const button = wrapper.find('button')
    button.trigger('click')
    console.log(wrapper.vm.data)*/

    test('should change name', async () => {
        const button = wrapper.find('button')
        button.trigger('click')
        console.log(wrapper.vm.name)
        expect(nameTag.text()).not.toContain('name')
        wrapper.vm.$nextTick()
        expect(nameTag.text()).not.toBe(lastNameValue)
    })

    test('should change image', async () => {
        const button = wrapper.find('button')
        button.trigger('click')
        console.log(wrapper.vm.name)
        expect(imgTag.attributes().src).not.toBe('')
        await wrapper.vm.$nextTick()
        expect(imgTag.attributes().src).not.toBe(lastImgValue)
    })

    test('should change type', async () => {
        const button = wrapper.find('button')
        button.trigger('click')
        expect(typeTag.attributes().src).not.toBe('')
        await wrapper.vm.$nextTick()
        expect(typeTag.attributes().src).not.toBe(lastTypeValue)
    })

    test('should change weight', async () => {
        const button = wrapper.find('button')
        button.trigger('click')
        expect(weightTag.attributes().src).not.toBe(0)
        await wrapper.vm.$nextTick()
        expect(weightTag.attributes().src).not.toBe(lastWeightValue)
    })

    test('should change height', async () => {
        const button = wrapper.find('button')
        button.trigger('click')
        expect(heightTag.attributes().src).not.toBe(0)
        await wrapper.vm.$nextTick()
        expect(heightTag.attributes().src).not.toBe(lastHeightValue)
    })

    test('should change abilities', async () => {
        const button = wrapper.find('button')
        button.trigger('click')
        expect(abilitiesTag.attributes().src).not.toBe([])
        await wrapper.vm.$nextTick()
        expect(abilitiesTag.attributes().src).not.toBe(lastAbilitiesValue)
    })
})