Testing Library Recorder Extension

Qué es

Testing Library Recorder Extension es una extensión de Chrome, mantenida por la organización Testing Library, que se integra con el panel Recorder de Chrome DevTools. Su función es exportar las grabaciones de interacciones del usuario como código de test de Testing Library listo para ejecutar con Jest. Está escrita principalmente en TypeScript, usa Webpack para el empaquetado y se distribuye con licencia MIT.

Para qué sirve

• Convertir una grabación del panel Recorder en un fichero de test de Testing Library completo.
• Copiar pasos individuales de una grabación como fragmentos de código de test.
• Traducir acciones del navegador (click, hover, escritura, navegación…) a comandos de @testing-library/dom y @testing-library/user-event.
• Acelerar la creación de tests partiendo de flujos reales en lugar de escribirlos a mano.

Cuándo usarlo

• Cuando ya usas Chrome DevTools Recorder para capturar flujos y quieres reutilizarlos como tests automatizados.
• Cuando trabajas con Jest y Testing Library y buscas un punto de partida rápido para tus pruebas.
• No sustituye a un test bien diseñado: el código generado suele necesitar ajustes manuales, sobre todo en aserciones y montaje del DOM.

Ejemplo

Primero instala las dependencias necesarias en tu proyecto:

npm install --save-dev jest jest-environment-jsdom jest-environment-url @testing-library/dom @testing-library/user-event @testing-library/jest-dom

Con una grabación abierta en el panel Recorder, pulsa “Export as a Testing Library script” y guarda el fichero como nombre.test.js. El resultado tiene esta forma:

test('Example', async () => {
  expect(location.href).toBe('https://example.com/');
  expect(document.title).toBe('Example Domain');
  await waitFor(() => screen.getByText('More information...'));
});

Luego ejecutas los tests con jest.

Puntos clave

• Se integra directamente en el panel Recorder de Chrome DevTools.
• Soporta exportar la grabación completa o copiar pasos sueltos.
• Genera código para Jest usando las APIs de Testing Library y user-event.
• Proyecto open source con licencia MIT mantenido por la organización Testing Library.

Ten en cuenta

• Solo se permite un paso de navegación por test, ya que depende de jest-environment-url para cargar la página; los tests sin navegación requieren montar el DOM manualmente.
• La última versión publicada es la v0.4.0 y el ritmo de desarrollo es bajo, así que conviene revisar el estado del proyecto antes de apoyarte en él para algo crítico.
• El código generado es un punto de partida: revisa y ajusta las aserciones para que reflejen lo que realmente quieres comprobar.