Pruebas unitarias basadas en aprendizaje automático en JavaScript

Rate this content
Bookmark

La charla aborda el escenario actual de la escritura de casos de prueba en JavaScript y los problemas asociados con el tiempo y los recursos que las empresas gastan en escribir los casos de prueba y la falta de automatización en esta área.

Luego, la charla cubrirá cómo la inteligencia artificial y el aprendizaje automático se están aprovechando mediante herramientas como Github Copilot y Ponicode para generar automáticamente casos de prueba, simplificando así el proceso de prueba de software.

22 min
03 Nov, 2022

Video Summary and Transcription

Esta charla explora las pruebas unitarias basadas en aprendizaje automático en JavaScript y TypeScript, centrándose en herramientas como la extensión Pony Code para VS Code y GitHub Copilot. La herramienta Pony Code proporciona una interfaz gráfica de usuario para generar y gestionar casos de prueba unitarios. GitHub Copilot actúa como una herramienta de autocompletado de código inteligente, comprendiendo el contexto del código y sugiriendo casos de prueba unitarios. Estas herramientas tienen como objetivo mejorar la cobertura de código y lograr una cobertura del 100%.

Available in English

1. Introducción al aprendizaje automático en las pruebas unitarias

Short description:

Hola a todos. Bienvenidos a mi charla en TestJS Summit 2022. El título de mi charla es Pruebas unitarias basadas en aprendizaje automático en JavaScript. Hoy vamos a echar un vistazo a algunas de las herramientas disponibles para los desarrolladores de software para automatizar las pruebas unitarias con la ayuda de JavaScript o TypeScript. La primera herramienta que vamos a ver es la herramienta Pony Code.

Hola a todos. Bienvenidos a mi charla en TestJS Summit 2022. El título de mi charla es Pruebas unitarias basadas en aprendizaje automático en JavaScript. Una breve introducción sobre mí. Soy Shabail Amba, miembro del grupo de trabajo de TensorFlow.js y mentor de soporte de Google en TensorFlow. La primera pregunta que seguramente vendrá a nuestra mente es por qué el aprendizaje automático y las pruebas de software. Si quieres entender más sobre cómo se utiliza el aprendizaje automático en las pruebas de software, te recomendaría que veas mi charla del año pasado en TestJS Summit 2021, donde presenté una charla sobre pruebas predictivas en JavaScript con la ayuda del aprendizaje automático y cómo puedes utilizar el aprendizaje automático para predecir qué tipo de casos de prueba se deben utilizar y cómo mejorar la cobertura de las pruebas. Si estás interesado en eso, te recomendaría que lo revises. Pero, por supuesto, la sesión de hoy trata sobre las pruebas unitarias y cómo puedes incluir el aprendizaje automático en las pruebas unitarias.

En caso de que no estés familiarizado con las pruebas unitarias, básicamente son una forma de probar las piezas más pequeñas de código, como una función, una subrutina o un método que puede estar definido en un lenguaje de programación. Y, por supuesto, tenemos diferentes tipos de técnicas de prueba, como las pruebas de integración, pero las pruebas unitarias son, con mucho, el procedimiento de prueba más pequeño que funciona en una sola función o un solo método. Y eso hace que las pruebas unitarias también sean una parte muy importante de todo el ciclo de desarrollo basado en pruebas, porque es muy importante asegurarse de que podamos probar cada una de las funcionalidades más pequeñas de un software, porque si tienes una base de código muy grande, incluso una función pequeña que no funcione correctamente puede causar errores desconocidos en toda tu base de código. Por lo tanto, es realmente importante y los casos de prueba unitarios forman una parte muy importante de la programación basada en pruebas de cualquier organización donde se realicen pruebas. Pero una de las desventajas que podemos discutir sobre las pruebas unitarias es que es un proceso muy manual. Cuando los probadores de software escriben casos de prueba unitarios para funciones, si tienes una base de código muy grande, puedes tener una multitud de funciones diferentes que estás escribiendo. Si terminas escribiendo casos de prueba unitarios para cada una de ellas, puede llevar mucho tiempo escribirlos y es mucho trabajo manual. En los últimos años, se ha invertido mucho esfuerzo en automatizar los procedimientos de casos de prueba unitarios. Y nuevamente, la idea principal es que, con la ayuda de la automatización en las pruebas unitarias, somos capaces de reducir el código repetitivo que se requiere para los casos de prueba unitarios. También somos capaces de sugerir y crear una combinación útil de datos de prueba que se pueden proporcionar a los probadores de software para que los utilicen como parte de sus capacidades de pruebas unitarias. Esto nos ayuda a mejorar la cobertura de nuestro código y nos ayuda a escribir casos de prueba personalizados que podrían haber sido omitidos por los desarrolladores de software. Y ahí es donde los avances en el aprendizaje automático y la inteligencia artificial nos están ayudando a hacer esta automatización en la generación de casos de prueba unitarios y a mejorar la cobertura de pruebas en general, lo cual era más difícil de hacer manualmente si se escribían casos de prueba manuales por humanos. Hoy vamos a echar un vistazo a algunas de las herramientas disponibles hoy en día para los desarrolladores de software para automatizar las pruebas unitarias con la ayuda de JavaScript o TypeScript. La primera herramienta que vamos a ver es la herramienta Pony Code. Pony Code es una extensión impulsada por IA que ayuda a generar casos de prueba unitarios para ti y, en función de las funciones que escribas en tu base de código, te recomendará ciertos casos de prueba y generará automáticamente el archivo de pruebas unitarias para ti, y esto se hace con la ayuda de una interfaz gráfica muy intuitiva. Básicamente, puedes usar la extensión de VS Code o la interfaz de línea de comandos (CLI) proporcionada por Pony Code para escribir casos de prueba unitarios o automatizar los casos de prueba unitarios para un directorio completo. También puedes utilizar la herramienta CLI, como se mencionó, así como las acciones de GitHub proporcionadas por Pony Code, que te permiten combinar la generación de pruebas durante tu plataforma CI/CD. Veamos una demostración del producto. Y, por supuesto, si quieres explorar más a fondo cómo empezar con Pony Code,

2. Usando la extensión Pony Code para VS Code

Short description:

Pero para esta demostración, pasaremos rápidamente a VS code. Puedes instalar la extensión Pony Code para VS code, CLI o usarla como una acción de GitHub. La extensión Pony Code para VS code proporciona una interfaz gráfica de usuario donde puedes generar casos de prueba unitarios. Sugiere casos de prueba para aumentar la cobertura de pruebas. Puedes agregar o eliminar fácilmente casos de prueba utilizando la interfaz de usuario de Pony Code. Los archivos de prueba generados se crean automáticamente con Pony Code.

Te recomendaría que consultes docs.ponycode.com. Pero para esta demostración, pasaremos rápidamente a VS code. Y primero, básicamente vamos a ir a este enlace en particular para la documentación. Como puedes ver, puedes instalar la extensión Pony Code para VS code o el CLI o también puedes usarlo como una acción de GitHub, y es gratuito, gratuito para desarrolladores individuales. Si haces clic en la extensión de VS code e instalas dentro de tu VS code, se verá algo así. Si estás usando básicamente, puedes ver que aparecerá aquí como este icono de Pony Code dentro de tu VS code. Y puedes echar un vistazo a algunas de las cosas que tiene la página de inicio. Y esto básicamente te muestra cómo empezar rápidamente y generar casos de prueba unitarios dentro de tu aplicación. Entonces, el que vamos a usar es la extensión Pony Code para VS code. En este caso, en mi directorio de archivos, he creado una carpeta de Pony Code. Y aquí lo que he hecho es simplemente crear un archivo index.cs y he creado una función simple para sumar dos números. Primero, veamos cómo se verá básicamente. Tan pronto como escribas cualquier función, Pony Code automáticamente podrá detectar la función que has escrito, como una función de JavaScript. Y aquí, puedes ver directamente que obtenemos esta interfaz de usuario gráfica donde puedes ver que podemos hacer clic en esta prueba unitaria de Pony Code, que básicamente generará una interfaz de usuario. Y puedes ver que básicamente ofrece algunas sugerencias para casos de prueba unitarios que puedes escribir. Así que, puedes ver que estas son las sugerencias proporcionadas por Pony Code para, digamos, aumentar la cobertura de tus pruebas. Digamos que quiero tomar este ejemplo de A y B. Básicamente, como es una función de suma de dos números, tenemos dos variables y aquí toma estos dos valores. Entonces, lo que puedo hacer fácilmente es probar esta función en particular. Y ver que, ya sabes, básicamente genera la respuesta y puedo hacer clic en el signo de más. Si quiero agregar este caso de prueba específico dentro de mi, uh, Pony Code. Y lo que hace de inmediato es que ahora tenemos una nueva carpeta en su lugar y esta carpeta es la carpeta de Pony Code. Si voy y exploro esta carpeta de Pony Code, puedes ver que es el archivo index.ts.js. Este es un archivo de generación de pruebas automatizado, creado automáticamente, uh, que ha sido creado por Pony Code. Si básicamente echamos un vistazo a, como, ya sabes, lo que incluye, ¿verdad? Puedes ver que, uh, primero de todo, lo que hace, ha hecho. Es que ha, uh, como, ya sabes, importado nuestro archivo index.js y ahora ha descrito una función, uh, index.addToNumbers porque esa es una función que tenemos en nuestro archivo index.js que hemos creado y hemos generado un aquí donde está, uh, como, ya sabes, llegando a estos dos valores. Ahora, digamos que queremos agregar algunos casos de prueba adicionales, podemos hacer clic fácilmente en la interfaz de usuario, uh, en la interfaz de usuario de Pony Code y agregar eso. Entonces eso se agregará automáticamente, uh, dentro de tu función index.test.js. Como puedes ver, tenemos otra, uh, como, ya sabes, función, otra función que hemos agregado, otro caso de prueba que hemos agregado. De esta manera, puedes eliminar o eliminar, uh, estos casos de prueba y automáticamente se generará la prueba unitaria para ti.

3. Pony Code y GitHub Copilot

Short description:

Pony Code es un conjunto de herramientas potente y fácil de usar para pruebas de software y pruebas unitarias. Admite varios lenguajes como JavaScript, TypeScript, Python y Java. Proporciona sugerencias inteligentes para nombres de funciones y genera casos de prueba unitarios automáticamente. Puedes agregar fácilmente casos de prueba para aumentar la cobertura de pruebas. Se puede integrar en tu flujo de trabajo de CI/CD. Otra herramienta que exploraremos es GitHub Copilot, un programador en pareja de IA que utiliza OpenAI Codex para recomendar nuevas funciones mientras escribes código. Actúa como una herramienta inteligente de autocompletado de código.

uh, se cambiará. Ahora, también tomemos un ejemplo de una función asíncrona. Así que definamos una función asíncrona, ¿de acuerdo? Uh, porque Pony Code funciona tanto con funciones estáticas como con funciones asíncronas. Digamos que definimos una función asíncrona como, digamos, obtener el primer nombre. Y digamos que es para una persona y aquí, procederemos a definir esto. Digamos que lo que hacemos es devolver, uh, básicamente person.name. Entonces, si hacemos clic en la generación de pruebas unitarias de Pony Code, automáticamente podrá entender que, uh, esto es básicamente una función basada en promesas, y puedes ver que al dar un nombre de función adecuado, es capaz de entender de manera muy inteligente que lo que estamos usando son básicamente nombres. Por lo tanto, ofrece sugerencias para, por ejemplo, nombres como name, digamos, como peer.org aquí, y puedes tomar algunos ejemplos. Entonces, si hago clic nuevamente en este ícono de suma, deberíamos ver esto nuevamente dentro de nuestra función. Como puedes ver, básicamente describe la misma función, y puedes ver que detecta automáticamente que es una función asíncrona. Por lo tanto, automáticamente nos proporciona un async dentro del caso de prueba que hemos escrito. Por lo tanto, puedes ver que es capaz de entender de manera muy inteligente qué funciones estás escribiendo y sugerir automáticamente algunos casos de prueba para ti. Y si agregas esos casos de prueba, generará el archivo y automáticamente generará el caso de prueba unitario para ti. Por lo tanto, no tienes que escribirlo tú mismo. Esto es realmente genial si estás comenzando con las pruebas de software con pruebas unitarias, ¿verdad? O si quieres aumentar tu cobertura de pruebas. Puedes agregar tantos casos de prueba como desees con la ayuda de estas sugerencias. Por eso, la herramienta Pony Code es muy fácil de usar y muy potente. Y también es compatible con varios lenguajes, como JavaScript, TypeScript e incluso Python, Java. Por lo tanto, también puedes usarlo para otros lenguajes, si lo deseas. Es tan fácil de usar. Y, por supuesto, si quieres que forme parte de tu CI/CD, puedes incluirlo como parte de tu flujo de trabajo de CI/CD también.

Ahora, eso es todo sobre una introducción muy rápida sobre cómo funciona básicamente Pony Code. En caso de que quieras instalarlo, puedes simplemente instalar la extensión de VS Code o la plataforma CLI. Ahora, avanzaremos con nuestra siguiente herramienta. La siguiente herramienta que vamos a ver es GitHub Copilot. Ahora, ¿qué es exactamente GitHub Copilot? Básicamente, es un programador en pareja de IA que se creó utilizando OpenAI Codex. Lo que hace es buscar en todos los tipos de bases de código públicas, incluidos todos los repositorios de código abierto en GitHub. Y el modelo OpenAI Codex básicamente ingresa todo este código completo que se proporciona. Y, por supuesto, con la ayuda de la IA, es capaz de recomendar nuevas funciones cuando estás escribiendo código. Por lo tanto, actúa como un autocompletado,

4. Usando GitHub Copilot para completar automáticamente las pruebas unitarias

Short description:

GitHub Copilot puede entender el contexto de tu código y completar automáticamente tus casos de prueba unitarios. Veamos una demostración. Tenemos una función index.js con código en inglés y español. Crearemos un caso de prueba unitario utilizando el paquete NPM zests.

pero, por supuesto, como un autocompletado de código inteligente. Y puede sugerirte completar líneas de código o funciones completas simplemente definiendo estos nombres de función. Y hoy veremos cómo podemos usar básicamente GitHub Copilot en el escenario de, digamos, completar automáticamente todos los casos. Ahora, por supuesto, en comparación con Pony code, no puede simplemente sugerir o no te proporciona una interfaz de usuario específica porque GitHub Copilot no es una herramienta de automatización de pruebas dedicada. Es básicamente un autocompletado de código. Pero lo que GitHub Copilot puede hacer es entender el contexto de todo tu directorio o de tu código que estás escribiendo y luego completar automáticamente tu código a medida que escribes. Así que digamos que si estás escribiendo algunos casos de prueba unitarios manualmente, al menos puede darte sugerencias para autocompletar tus casos de prueba unitarios que estás escribiendo. Y veremos una demostración rápida de cómo funciona eso. Así que veamos básicamente la demostración de GitHub Copilot. Lo que haremos es ir y ver. Básicamente, he creado otro directorio aquí en mi VS code, que se llama Copilot. Y aquí tengo una función index.js. Y cerraré todas las otras que no son necesarias. Y guardemos. Cerraremos todo esto. Sí, esta es la función muy simple que he creado aquí. Tengo código en inglés y código en español. Y luego lo que he hecho es, tenemos esta función simple sobre obtener el enlace sobre nosotros. Básicamente, según el código específico, ya sea en inglés o en español, devolverá la página sobre nosotros, según ese idioma específico. Así que lo que haremos es crear un caso de prueba unitario para esto. Ahora, por supuesto, como una dependencia de desarrollo, algo a tener en cuenta es que vamos a instalar, vamos a usar zests como nuestra dependencia. Así que aquí puedes ver que lo que vamos a usar es zests. En caso de que también quieras usarlo, simplemente puedes hacer yarn add zests y eso agregará el paquete zests de NPM para ti. Así que solo instala, esto se usa para pruebas en JavaScript. Por lo tanto, puedes instalar el paquete específico de zests basado en NPM, y ahora navegaré rápidamente a la carpeta CoPilot. Así que hagamos eso. Ahora estamos dentro de CoPilot. Lo que haremos es que, por supuesto, con zests, la forma en que escribes casos de prueba es creando un archivo con el nombre underscore.test.js. En este caso, sea cual sea tu archivo principal, crearás un archivo correspondiente allí. Aquí es donde

5. Comenzando con GitHub CoPilot

Short description:

Para comenzar con GitHub CoPilot, puedes instalarlo como una extensión en tu VS code. Actualmente es de pago, pero los mantenedores y contribuidores de código abierto pueden obtenerlo de forma gratuita. Los estudiantes también pueden obtenerlo de forma gratuita. Una vez instalado, encontrarás el icono de CoPilot en tu VS code. Sugerirá automáticamente código mientras escribes y podrás escribir casos de prueba unitarios utilizando esta herramienta.

básicamente escribimos un caso de prueba. Ahora, para comenzar con GitHub CoPilot, podemos visitar, como otro GitHub CoPilot. Y, ya sabes, este es básicamente el GitHub CoPilot. Entonces, nuevamente, cómo funciona básicamente es que puedes instalarlo como una extensión en tu VS code. Por supuesto, actualmente es de pago. Pero si, digamos, eres un mantenedor de código abierto, puedes obtener GitHub CoPilot de forma gratuita. Entonces, si, eres un mantenedor o contribuidor de código abierto, también puedes obtenerlo de forma gratuita. Pero si también eres estudiante, definitivamente puedes obtenerlo de forma gratuita. Entonces, nuevamente, cómo se ve básicamente es que una vez que lo hayas instalado con éxito en tu GitHub, en tu VS code, encontrarás el icono de CoPilot aquí. Así que puedes ver que ahora está habilitado para mí. Y también puedes habilitarlo nuevamente en unos pocos clics, podrás habilitarlo y usarlo.

Ahora lo que haré es que, como verás, a medida que escribas algo, te sugerirá automáticamente código. Así que digamos que escribo y tenemos un comentario que dice, escribir un caso de prueba unitario. Entonces básicamente entenderá, ya sabes, el contexto. Y puedes ver que ya está proporcionando algo como una solución para la función auto a números. Pero por supuesto, lo que haremos es simplemente escribir y escribiremos, digamos, para, podemos decir, escribir un caso de prueba unitario para el archivo index.js, ¿verdad? Así que básicamente vamos a usar eso. Así que vamos a empezar a escribir nuestra función. Como puedes ver, automáticamente conoce la ruta. Así que tomemos esto como suficiente de GitHub CoPilot. Y ahora vamos a escribir nuestra función real. Entonces, ya sabes, primero, lo que haremos es que primero obtendremos, digamos, definiremos una, ya sabes, definiremos una variable obtener enlace sobre nosotros. Y esto básicamente requerirá de nuestra función index que hemos creado. Entonces, hemos escuchado, ya sabes, podemos obtenerlo de, de index, ¿verdad? Así que lo obtendremos de nuestro index. Ahora definamos nuestro caso de prueba. En este caso, el caso de prueba que definiremos. Así que definamos nuestro caso de prueba aquí. Digamos que lo definimos como, ya sabes, en este caso, escribamos. De acuerdo. Así que básicamente definamos nuestro caso de prueba como devuelve sobre nosotros en idioma inglés. Digamos en idioma inglés, ¿verdad? Como puedes ver, a medida que escribes, automáticamente nos proporciona sugerencias para

6. Escribir código y usar GitHub Copilot

Short description:

Ahora vamos a escribir nuestro código y ver las sugerencias proporcionadas por GitHub Copilot. Podemos escribir fácilmente casos de prueba utilizando las sugerencias automáticas. Estas herramientas ayudan a mejorar la cobertura del código y lograr una cobertura del 100%. Conéctate conmigo en Twitter y GitHub. ¡Gracias por asistir a mi charla!

Así que en este caso, simplemente completaré este código aquí. Y ahora básicamente escribiremos nuestro código. Así que veremos que esperamos, ¿verdad? Así que vamos a definir esto. Y como puedes ver, automáticamente nos sugiere el código que, como sabes, básicamente estamos usando la función obtener sobre este enlace, y vamos a usar la función en inglés y debería ser, ya sabes, sobre nosotros. Así que simplemente completémoslo. Y usemos esto y guardemos esto. Así que, como puedes ver, esta función en particular y úsala, como puedes ver, está bien, probablemente falló por un segundo, así que asegurémonos de que funcione aquí. Así que echemos un vistazo rápido al archivo index.js y debería ser sobre nosotros. Así que vamos a ver el test y el test. Intentemos ver si podemos ejecutar esto. Así que usaremos test y como puedes ver, básicamente pasa, ¿verdad? Esa es la idea de que, con la ayuda de GitHub Copilot. Aunque no te proporciona una interfaz de usuario completa algo muy similar a Pony Code, pero aún es lo suficientemente inteligente como para entender el contexto de todo tu directorio y luego proporcionarte sugerencias automáticas de código mientras escribes. Así que básicamente puedes escribir fácilmente tus casos de prueba con la ayuda de las sugerencias automáticas que proporciona GitHub Copilot. Por supuesto, estas fueron un par de las diferentes herramientas que hemos visto. Ahora también hay muchas otras herramientas diferentes que se están creando hoy en día y que están disponibles para otros lenguajes también, pero estas fueron un par de las demostraciones que quería mostrar para JavaScript. Para resumir, ya sea que quieras comenzar con casos de prueba unitarios o si quieres aumentar la cobertura de tu código en lugar de tu programación orientada a pruebas, herramientas como PonyCode y GitHub Copilot te permiten hacer eso y te permiten disminuir ese esfuerzo manual que se requiere para generar tantos casos de prueba y también te ayuda a pensar en esos tipos de casos de prueba que probablemente no hayas cubierto o que hayas olvidado agregar y eso es por qué estas herramientas son muy poderosas para ayudar a mejorar la cobertura general del código y ayudar a lograr ese sueño de alcanzar una cobertura del 100% del código y especialmente en esta área de la generación actual de programación orientada a pruebas, la adopción de estas herramientas va a mejorar mucho y la automatización de casos de prueba unitarios definitivamente está en camino. Con eso, muchas gracias por asistir a mi charla y puedes conectarte conmigo en mi Twitter en RedHotDevelop y en mi GitHub también y en caso de que tengas alguna pregunta, no dudes en contactarme y también estaré en TestJS Summit. Así que, si quieres conectarte conmigo, estaré encantado de hablar sobre IA y cómo la IA está revolucionando las pruebas de software. Muchas gracias a todo el equipo y espero verte el próximo año en TestJS Summit 2023. Gracias

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
WorkshopFree
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.