Estoy probando algunos componentes de Vue 3 con broma y espero obtener una emisión cuando se hace clic en un botón. Ahora quiero verificar si el objeto emitido coincide con un tipo personalizado que creé en un archivo diferente. p.ej:
//types.ts export type customType = { foo: string; bar: { foobar: number; barfoo: number; }; }Mi caso de prueba se parece a esto:
//Component.spec.js it("tests if types match", () => { const wrapper = [...]; // do some stuff to get this event emitted expect(typeof wrapper.emitted().customEvent).toBe(customType); }); Pero aquí Element is not accessible en customType a pesar de que lo estoy importando.
¿Cómo puedo verificar si la variable emitida con mi evento personalizado coincide con mi tipo personalizado?
La razón por la que está viendo esto es porque la expect de Jest no reconoce tipos, ya que las pruebas se compilan en JavaScript en tiempo de ejecución.
Tienes dos enfoques posibles:
R. Si realmente desea evaluar los tipos personalizados en tiempo de compilación, use el paquete expect-type
import { expectTypeOf } from 'expect-type' expectTypeOf(wrapper.emitted().customEvent).toEqualTypeOf<customType>()Debajo del capó, todavía usa JavaScript, similar a B.2. a continuación, excepto que no necesita escribir la función usted mismo, se genera sobre la marcha, a partir del tipo proporcionado.
Tenga en cuenta que hay diferencias entre toMatchTypeOf y toEqualTypeOf (el último es más estricto, por ejemplo, falla en accesorios adicionales).
B. Cíñete a JavaScript, con las siguientes alternativas:
B.1. La solución más simple sería verificar el valor real:
expect(wrapper.emitted().customEvent).toEqual(someValue) // I'm guessing you know the value in the testB.2. Alternativamente, puede hacer una función tomando el valor como parámetro y verificando todos los accesorios requeridos de su tipo. p.ej:
const checkCustomEvent = event => typeof event?.foo === 'string' && [event?.bar?.barfoo, event?.bar?.foobar] .every(el => typeof el === 'number'); expect(checkCustomEvent(wrapper.emitted().customEvent)).toBe(true)B.3. Otra alternativa más (personalmente no me gusta y rara vez lo uso), sería cambiar su customType para que sea una clase. En ese momento se puede comprobar:
expect(wrapper.emitted().customEvent instanceof SomeClass).toBe(true) // or expect(wrapper.emitted().customEvent).toBeInstanceOf(SomeClass)Personalmente, prefiero el primer método js (B.1.) la mayoría de las veces. Si tengo resultados dinámicos y tiene sentido escribir una función de protección de tipos para verificarlos todos, podría hacerlo (B.2.).
Nota al margen: dudo que el valor de un emitted()[someKey] sea alguna vez un objeto. Según los documentos , sería una matriz de matrices: Array<Array<any>> . Probablemente quieras usar wrapper.emitted().customEvent[0][0] , no wrapper.emitted().customEvent