0
218
ViewsCómo probar con jest y vue-test-utils simular archivo de carga
Uso bromas con vue-test-utils y quiero un método de prueba para cargar archivos. Este método en el componente de archivo vue.
async uploadFiles(file){ this.$refs.iconUpload.setAttribute('data-load', 'loading') let formData = new FormData(); formData.append('image', file); try{ const result = await fetch('/upload', { method: 'POST', body: formData, }) const data = await result.json(); if(data.status){ this.$refs.iconUpload.setAttribute('data-load', 'success') this.$refs.btnClear.style.display = 'none'; this.$refs.btnGoBack.style.display = 'none'; this.uploadDone = true; }else { this.showSpecialError(this.$refs.elseError) } }catch (e){ this.showSpecialError(this.$refs.elseError) return null } }y quiero probarlo con resolver y rechazar
const file = { size: 500, type: 'image/png', name: 'image.png }; const event = { target: { files: [file], }, }; global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve({ data }) })); test('the function of sending the file returns the required response on a successful response', async () => { const result = await wrapper.vm.uploadFiles(event) expect(result).toEqual(file) })Pero la prueba siempre devuelve nulo
1 answers
Answer question0
En la prueba, está esperando el resultado de la función uploadFiles . Pero uploadFiles no return el archivo, como parece esperar su prueba.
Lo haría si, al final del bloque try {} , agregara:
return data; Debido a que uploadFiles es async , el valor devuelto se incluiría automáticamente en una promesa. Por lo tanto, sería equivalente a devolver Promise.resolve(data) en una función síncrona.
Pero devolver data al final del bloque try{} no es lo que deberías hacer, en realidad.
Dentro de su método de componente, lo único que está comprobando de la respuesta de la llamada /upload es si se establece o no un status verdadero en la respuesta ( if (data.status) ). Lo cual es simplemente incorrecto, porque un estado de 404 (no encontrado) es veraz. También lo es un estado de 500 (error del servidor). Todos los estados de error del servidor, de hecho, son verdaderos, porque todos son números finitos y positivos.
Volviendo a la prueba, tienes dos opciones:
a)
si desea probar el código del componente actual (que no debería), todo lo que necesita probar es si wrapper.vm.uploadDone se establece en true cuando la búsqueda devuelve una respuesta que contiene un valor de estado verdadero.
Esta prueba pasaría con su componente actual:
global.fetch = jest.fn(() => Promise.resolve({ json: () => Promise.resolve({ status: 404 }) })); test('uploadDone gets set to true when receiving a truthy response from /upload', async () => { expect(wrapper.vm.uploadDone).toBe(false); await wrapper.vm.uploadFiles({ size: 500, type: 'image/png', name: 'image.png' }); expect(wrapper.vm.uploadDone).toBe(true); }) Pero, en realidad, sus uploadFiles no deberían configurar uploadDone cuando reciben un resultado con un estado diferente a 200 .
Mi consejo para ti es que vayas por la alternativa:
b)
pida ayuda a un miembro superior de su equipo, que podría explicar en detalle lo anterior y ayudaría a reescribir la función uploadFiles . Hasta que ese método no haga lo que debería, no tiene mucho sentido escribir pruebas para él.
Las pruebas están ahí para asegurarse de que la aplicación se comporte como se espera, tanto cuando los sistemas externos fallan como cuando funcionan como se espera.
Mi impresión es que su aplicación actualmente no funciona según las expectativas.
Así que escribe la prueba de acuerdo con las expectativas reales (del cliente). Y luego escribir el código que supera todas las expectativas.