1

He probado hacer un mock o espiar el objeto document con Jest pero no me ha sido posible. Por ejemplo, tengo la siguiente clase:

export class MyClass {
  create() {
    const element = document.createElement('h1');
    element.innerText = 'Hola mundo';
    document.body.appendChild(element);
  }
}

No pongo los detalles de implementación de la clase en el test porque es muy básico, se crea una instancia y se invoca al método create():

Metodo 1:

espiando el objeto document:

jest.spyOn(window.document, 'createElement').mockReturnValue({} as HTMLElement);

Esto produce el siguiente error:

"Exceeded timeout of 5000 ms for a test.
    Add a timeout value to this test to increase the timeout, if this is a long-running test. See https://jestjs.io/docs/api#testname-fn-timeout.

He probado usando solo "document" o incluso usando "global.document". Obtengo el mismo resultado.

Método 2:

Modificando (para el test) el prototipo del objeto "Document":

global.Document.prototype.createElement = jest.fn((tagName: string): any => {
      tagName = tagName
    }).mockReturnValue({} as HTMLElement);

expect(document.createElement).toHaveBeenCalledWith('h1');

Método 3:

Espiando el prototipo del objeto Document:

const spyCreateElement = jest.spyOn(global.Document.prototype, 'createElement');
expect(spyCreateElement).toHaveBeenCalledWith('script');

Me devuelve un falso positivo, porque lo que yo he creado ha sido un elemento de tipo "h1" no "script".

Alguien ha trabajado con el objeto Document? Gracias.

1 respuesta 1

0

Encontré la forma de hacerlo, ojalá pueda ayudar a quien lo necesite. Básicamente lo que hice fue eliminar los objetos createElement y appendChild en mi prueba:

// @ts-ignore
delete global.document.createElement;
// @ts-ignore
delete global.document.head.appendChild;

y redefinirlos mediante espías:

jest.spyOn(global.document, 'createElement').mockReturnValue({
      src: ''
    } as Partial<HTMLScriptElement>);


jest.spyOn(global.document.head, 'appendChild').mockReturnValue({} as HTMLElement);

Posteriormente, invoco la ejecución del código que debería llamar a los métodos createElement y appendChild y hago la aserción:

expect(global.document.createElement).toHaveBeenCalledWith('script');
expect(global.document.head.appendChild).toHaveBeenCalled();

Con esto pude resolver mi problema, ojalá le sirva a alguien más.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.