Tengo un módulo en mi proyecto vuejs que quiero probar.
import { getBaseUrl } from "@/application/api/baseUrl"; export default ( uri: string, requestBody: Record<string, string | number> ): void => { let form = document.createElement("form"); form.method = "POST"; form.action = `${getBaseUrl()}/${uri}`; form = convertToFormData(form, requestBody); submitForm(form); }; function convertToFormData( form: HTMLFormElement, requestBody: Record<string, string | number> ) { for (const [key, value] of Object.entries(requestBody)) { const element = document.createElement("input"); element.name = key; element.value = value.toString(); form.appendChild(element); } return form; } function submitForm(form: HTMLFormElement) { document.body.appendChild(form); form.submit(); } Quiero probar este comportamiento, pero no quiero que se redirija realmente, así que quiero simular el envío de Form con un simple submitForm jest.fn() para poder comprobar su comportamiento.
Traté de implementar rewire usando babel para ts pero no puedo hacer que funcione con el nuevo vue-cli 5.*. Estos paquetes de babel también parecen estar abandonados. ¿Hay otra forma de probar este comportamiento?
mi prueba en este punto:
import postRedirect from "@/application/util/postRedirect"; const submitFormMock = jest.fn(); jest.mock("@/application/util/postRedirect", () => ({ ...jest.requireActual('@/application/util/postRedirect'), submitForm: submitFormMock, })); describe("PostRedirect", () => { it("", () => { postRedirect("test", { foo: "bar", baz: "foo" }); expect(submitFormMock).toBeCalled(); const formDataObject = {} as Record<string, unknown>; for (const [key, value] of new FormData( submitFormMock.mock.calls[0][0] ).entries()) { formDataObject[key] = value; } expect(formDataObject.foo).toBe("bar"); expect(formDataObject.baz).toBe("foo"); }); }); Trato de burlarme de submitForm pero este no es el camino a seguir, tal vez alguien más sepa cómo burlarse de esto correctamente.
actualización: actualmente también estoy tratando de exportar el formulario de envío de todos modos, incluso si no se debe exportar, pero tampoco puedo hacer que funcione. ya que tengo que simular solo una exportación con nombre y no la exportación predeterminada
Con un poco de inspiración de @jonrsharpe, creé una nueva prueba con la idea de que no debería probar métodos privados.
Todavía lo encuentro un poco sucio, pero esta es una forma de probar que cuando llamo a mi función que realiza una redirección mediante una llamada POST, que en realidad realiza un envío y que tiene los atributos correctos en el formulario que se creó.
Estoy abierto a otras opiniones y formas de probar esto, o de formas de redirigir al usuario con una publicación a otra aplicación.
import postRedirect from "@/application/util/postRedirect"; describe("PostRedirect", () => { it("", () => { const mockSubmit = jest.fn(); window.HTMLFormElement.prototype.submit = mockSubmit postRedirect("test", { foo: "bar", baz: "foo" }); expect(mockSubmit).toBeCalled(); // @ts-ignore const values = Array.from(new FormData(document.getElementsByTagName("form")[0] as HTMLFormElement)); expect(values[0][0]).toBe("foo"); expect(values[0][1]).toBe("bar"); expect(values[1][0]).toBe("baz"); expect(values[1][1]).toBe("foo"); }); });