Mock Service Worker 2.0

Rate this content
Bookmark

Ha pasado medio decenio desde que Mock Service Worker (MSW) cambió la forma en que los desarrolladores abordan y piensan en la simulación de API en JavaScript. Con toda su innovación, sentí que podríamos hacer más. Pasé el último año haciendo que eso sucediera. ¡No puedo esperar para compartirlo con todos ustedes!

FAQ

MSW es una biblioteca de mocking de API que permite interceptar solicitudes y simular respuestas para controlar la red en escenarios de testing, prototipado y depuración. Utiliza la API de ServiceWorker para la interceptación del lado del navegador, permitiendo una integración más natural sin parches invasivos como window.fetch.

MSW introduce el mocking de API como una capa independiente, permitiendo una única descripción de la red que se integra con diversas herramientas, lo que evita redundancias y mejora la reutilización de código entre diferentes frameworks y herramientas de testing.

En MSW, un manejador de solicitudes intercepta tipos específicos de solicitudes y define respuestas simuladas. Por ejemplo, puedes interceptar una solicitud POST a un endpoint específico y usar una función de callback para definir la respuesta basada en el cuerpo de la solicitud analizado como JSON.

Con la introducción de la API fetch en Node.js 18, MSW puede usar esta API como base tanto para el navegador como para Node.js, simplificando la representación de la red y eliminando abstracciones específicas, lo que reduce la cantidad de código y mejora la compatibilidad.

MSW siempre ha soportado TypeScript de forma nativa, ofreciendo un soporte genérico para el cuerpo de la solicitud, el cuerpo de la respuesta y otros parámetros. Sin embargo, se están realizando esfuerzos para mejorar la documentación y los ejemplos de código para TypeScript en la nueva versión de MSW.

MSW 2.0 mantiene la misma funcionalidad básica pero con una API simplificada que utiliza más intensamente las capacidades estándar de JavaScript, como la manipulación de solicitudes y respuestas utilizando directamente la API fetch, reduciendo la necesidad de abstracciones propias de la biblioteca.

Las contribuciones a la documentación de MSW son bienvenidas, especialmente en áreas como ejemplos de código y guías de uso. Es un excelente punto de partida para aquellos nuevos en el código abierto y una forma de mejorar el soporte y la accesibilidad de la herramienta para nuevos usuarios.

Artem Zakharchenko
Artem Zakharchenko
27 min
07 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

MSW es una biblioteca de simulación de API que simplifica el proceso de interceptar solicitudes y simular respuestas. Aprovecha las API estándar de JavaScript como la API de ServiceWorker y la API de Fetch. MSW ha visto una adopción significativa, con más de 90,000 proyectos en GitHub y 2.5 millones de descargas semanales en npm. El reciente lanzamiento de Node.js 18 ha permitido la refactorización y simplificación en MSW. MSW admite TypeScript y se puede utilizar para pruebas de contrato con herramientas como PACT I-O.

Available in English: Mock Service Worker 2.0

1. Introducción al mocking de API con MSW

Short description:

Hola a todos. Hoy, me gustaría hablar sobre el mocking de API, los estándares, JavaScript y MockServiceWorker. MSW es una biblioteca de mocking de API que te permite interceptar solicitudes y simular respuestas. Introduce el mocking de API como una capa independiente, resolviendo el problema de las descripciones de red repetitivas en diferentes herramientas. MSW logra el mocking de API sin recurrir a parches de window.fetch, confiando en su lugar en la API estándar de JavaScript como la API de ServiceWorker.

Hola a todos. Es un placer estar aquí y gracias por unirse. Hoy, me gustaría hablar sobre el mocking de API, standards, JavaScript y, por supuesto, MockServiceWorker.

Primero lo primero. Mi nombre es Artem. Puedes encontrarme como Ketanaito prácticamente en todas partes, incluyendo mi humilde blog en ketanaito.com. Y también puedes conocerme como el autor de MockServiceWorker.

Por curiosidad, ¿puedes levantar la mano si has oído hablar de MSW? Vaya, eso es mucho. Disfrutarás de esta charla. Sí, así que para aquellos que no han oído hablar de él, MSW es una biblioteca de mocking de API. Así que en esencia, te permite interceptar solicitudes y simular respuestas, básicamente controlar tu red para lo que quieras, testing, prototipado, depuración.

Y tiene un enfoque un poco único para el mocking de API. Introduce el mocking de API como una capa independiente. Así que si piensas en cómo controlas tu red durante testing, por ejemplo, bueno, tienes un montón de estas diferentes herramientas, ¿verdad? Tienes herramientas como Playwright y Cypress y Vitesse y Jest, y todas vienen con sus propias capacidades de mocking de API, que son increíbles. Pero lo que pasa es que, una vez que logras esta cobertura total de pruebas de tu producto, empiezas a notar que estas descripciones de red que haces, se repiten. En esencia, sólo quieres hacer una cosa, describir la red, pero estás usando diferentes APIs de diferentes frameworks, y no saben el uno del otro. No pueden comunicarse. Hay muy poco que puedas reutilizar. Y eso es precisamente lo que resuelve MSW. Eleva esta intención. Así que tienes una sola capa de descripción de tu red, y luego la integras en una herramienta en particular. Y como guinda del pastel, logra el mocking de API sin recurrir a estos desagradables parches de window.fetch y en su lugar confía en la API estándar de JavaScript, como la API de ServiceWorker, si estamos hablando de la interceptación del lado del navegador.

Pero, ¿cómo haces eso? ¿Cómo describes la red con MSW? Bueno, usas estas funciones llamadas manejadores de solicitudes. Te mostraré un ejemplo. Así que este es un manejador de solicitudes muy simple. Puedes ver que la intención aquí es interceptar una solicitud POST al endpoint de slash user. Y luego tenemos esta función de callback que debería producir la respuesta. Tenemos solicitud, argumento, respuesta y contexto. Así que lo que vamos a hacer con esta solicitud, intentaremos leer su cuerpo como JSON. Así que MSW intentará ser inteligente aquí, de hecho, y ver qué encabezado de tipo de contenido tiene tu solicitud.

2. Mocking de API y Mejoras en JavaScript

Short description:

Si es application slash JSON, intentará analizarlo y devolverte el objeto. Usamos esta función de composición REST para componer un montón de utilidades de contexto, como este context.json para devolver una respuesta JSON. MSW celebra su quinto aniversario este año. JavaScript ha recibido muchas mejoras a lo largo de los años. Frameworks como Next.js y Remix están abandonando las abstracciones personalizadas y apostando más por JavaScript. MSW tiene más de 90,000 proyectos en GitHub y más de 2.5 millones de descargas en npm cada semana.

Y si es application slash JSON, intentará analizarlo y devolverte el objeto. Así que estamos accediendo a la propiedad name aquí. Y luego para devolver una respuesta simulada, usamos esta función de composición REST para componer un montón de utilidades de contexto, como este context.json para devolver una respuesta JSON. Así que este es un ejemplo muy, muy básico de tu descripción de red.

Y una cosa que me gusta hacer cuando uso cualquier biblioteca de terceros, me gusta hacer este divertido ejercicio. Así que tomo un ejemplo muy básico como este, y elimino todo lo que no es estándar JavaScript. Así que hagamos justamente eso. Oh, no queda realmente mucho. Básicamente todo lo que estaba escrito allí sigue siendo válido y funcional, pero son todas abstracciones. Si lo piensas, REST.POST es una abstracción. Es algo específico de la biblioteca. Lo mismo que esta firma de llamada de los resolutores de respuesta. En ninguna otra parte de JavaScript usas esta firma de llamada para manejar solicitudes. La función de respuesta, por mucho que me guste la composición funcional, no es tan común en JavaScript, para bien o para mal. Y, por supuesto, las utilidades de contexto, una API completamente inventada. Y esta API ha sido funcional y ha estado trabajando durante años.

De hecho, este año, creo, MSW celebra su quinto aniversario. Y puedes decir, bueno, si no está roto, simplemente no lo arregles. No soy un gran fan de eso. De hecho, trabajar en código abierto, creo, me ha enseñado un motivo mucho más importante. Si no es educativo, no lo envíes. Porque mi objetivo como mantenedor de código abierto es compartir mis ideas. Pero también quiero que todos esos desarrolladores que les gustan mis ideas y usan mis ideas mejoren en JavaScript, en el lenguaje, no en mis pequeños proyectos. Porque, si lo piensas, JavaScript ha recibido muchas mejoras a lo largo de los años. Y puedes ver esto muy aparentemente en las direcciones que los frameworks como Next.js y Remix están tomando. Están abandonando esas abstracciones personalizadas. Y están apostando cada vez más por JavaScript porque es increíble. Resulta que MSW ha sido muy utilizado. Tiene más de 90,000 proyectos en GitHub usando MSW. Y más de 2.5 millones de descargas en npm cada semana.

QnA

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

Desarrollo Efectivo de Pruebas
TestJS Summit 2021TestJS Summit 2021
31 min
Desarrollo Efectivo de Pruebas
Top Content
Los desarrolladores quieren dormir tranquilos sabiendo que no rompieron la producción. Las empresas quieren ser eficientes para satisfacer las necesidades de sus clientes más rápido y obtener una ventaja competitiva antes. TODOS queremos ser coste efectivos... o debería decir... ¡PRUEBA EFECTIVA!¿Pero cómo hacemos eso?¿Nos sirve bien la terminología de "unidad" e "integración"?¿O es hora de un cambio? ¿Cuándo deberíamos usar cada estrategia para maximizar nuestra "efectividad de prueba"?¡En esta charla te mostraré una nueva forma de pensar sobre las pruebas coste efectivas con nuevas estrategias y nuevos términos de prueba!¡Es hora de ir MÁS PROFUNDO!
El Arte de las 'Vistas Humildes': Probando Aplicaciones React Native de Manera Inteligente
TestJS Summit 2023TestJS Summit 2023
32 min
El Arte de las 'Vistas Humildes': Probando Aplicaciones React Native de Manera Inteligente
En esta charla, exploramos el mundo divisivo de las pruebas, donde los desarrolladores a menudo se encuentran divididos entre no escribir pruebas y esforzarse por una cobertura de pruebas del 100%. Aprenda a navegar estas posiciones polarizantes y adopte una estrategia más matizada que hace que las pruebas sean eficientes y efectivas. Profundizaremos en el concepto de 'Vistas Humildes', donde minimizamos los objetos no probables extrayendo la lógica de los elementos de la interfaz de usuario a partes amigables para pruebas del código base. Este enfoque simplifica las pruebas, centrándose en la lógica de negocio en lugar de las complejidades de la interfaz de usuario. Descubra cómo la arquitectura Modelo-Vista-Presentador (MVP) ayuda a lograr esto, con los presentadores sirviendo como una capa lógica para las pruebas y los hooks ayudando a separar la lógica de los componentes de la interfaz de usuario. A lo largo de la charla, discutiremos los compromisos de este enfoque, el papel de las pruebas de extremo a extremo (E2E), y cómo lograr el equilibrio perfecto entre demasiadas y pocas pruebas. ¡Únase a nosotros mientras nos adentramos en el arte de crear 'Vistas Humildes', asegurando que nuestras aplicaciones React Native sean escalables, mantenibles y efectivamente probadas!
Quizá No Necesitemos Pruebas de Componentes
Vue.js Live 2024Vue.js Live 2024
26 min
Quizá No Necesitemos Pruebas de Componentes
Las pruebas son obligatorias y las pruebas unitarias son la base para construir un buen sistema de pruebas para nuestro proyecto. Pero para proyectos de frontend que involucran componentes, ¿cuántas pruebas unitarias se consideran eficientes y no excesivas? ¿Deberíamos usar bibliotecas adicionales como Testing Library o Vue Test Utils con Vitest para probar un componente, cuando podemos hacer lo mismo solo con Playwright? ¿Realmente es necesario realizar una prueba de componente utilizando un framework de E2E como Playwright? Descubrámoslo en mi charla.
Manejo Seguro de Datos Dinámicos con TypeScript
Node Congress 2021Node Congress 2021
29 min
Manejo Seguro de Datos Dinámicos con TypeScript
Top Content
TypeScript hace JavaScript más seguro agregando definiciones de tipo estático. Las definiciones estáticas son maravillosas; evitan que los desarrolladores cometan errores triviales asegurando que cada asignación e invocación se haga correctamente. Una variable tipificada como una cadena no puede ser asignada un número, y una función que espera tres argumentos no puede ser llamada con solo dos. Estas definiciones solo existen en el momento de la compilación; el código que finalmente se ejecuta es solo JavaScript. ¿Pero qué pasa con la respuesta de una solicitud de API? En esta charla, Ethan Arrowood, Ingeniero de Software 2 @ Microsoft, cubrirá varias soluciones para tipificar de manera segura los datos dinámicos en las aplicaciones TypeScript. Esta charla presenta tecnologías populares como Fastify, JSON Schema, Node.js, y más!
Pruebas de Componentes con Vitest
TestJS Summit 2023TestJS Summit 2023
29 min
Pruebas de Componentes con Vitest
Las pruebas son importantes. Las pruebas unitarias adecuadas pueden eliminar la posibilidad de que aparezcan errores. Pero, ¿qué marco de pruebas será adecuado? Exploremos cómo podemos desarrollar una estrategia confiable y eficiente para el desarrollo y prueba de componentes con Vitest
Asegurando APIs de Node.js con Tokens de Identidad Descentralizados
JSNation Live 2021JSNation Live 2021
9 min
Asegurando APIs de Node.js con Tokens de Identidad Descentralizados
La autenticación y autorización son problemas serios. A menudo dedicamos mucho tiempo a crear APIs poderosas pero pasamos por alto las medidas de seguridad adecuadas. Vamos a resolverlo con Magic utilizando una solución de identidad basada en claves sobre el estándar DID, donde las identidades de los usuarios son soberanas y se aprovechan de los pares de claves públicas y privadas de la cadena de bloques. En esta charla, veremos las formas adecuadas de asegurar nuestras APIs de Node.js con Tokens de Identidad Descentralizados. Pasaremos desde aprender qué son los estándares de Identidad Descentralizada, cómo las identidades de los usuarios son soberanas y se aprovechan de los pares de claves públicas y privadas de la cadena de bloques, por qué son el futuro de la seguridad de las APIs, y para poner en práctica la teoría construiremos una implementación real utilizando Node.js donde mostraré las mejores prácticas comunes.

Workshops on related topic

Introducción a React Native Testing Library
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introducción a React Native Testing Library
Workshop
Josh Justice
Josh Justice
¿Estás satisfecho con tus suites de pruebas? Si dijiste que no, no estás solo, la mayoría de los desarrolladores no lo están. Y hacer pruebas en React Native es más difícil que en la mayoría de las plataformas. ¿Cómo puedes escribir pruebas en JavaScript cuando el código JS y nativo están tan entrelazados? ¿Y qué diablos se supone que debes hacer con esa persistente advertencia de act()? Ante estos desafíos, algunos equipos nunca logran avanzar en las pruebas de su aplicación de React Native, y otros terminan con pruebas que no parecen ayudar y solo requieren tiempo adicional para mantener.
Pero no tiene que ser así. React Native Testing Library (RNTL) es una excelente biblioteca para pruebas de componentes, y con el modelo mental adecuado puedes usarla para implementar pruebas de bajo costo y alto valor. En este taller de tres horas aprenderás las herramientas, técnicas y principios que necesitas para implementar pruebas que te ayudarán a lanzar tu aplicación de React Native con confianza. Saldrás con una visión clara del objetivo de tus pruebas de componentes y con técnicas que te ayudarán a superar cualquier obstáculo que se interponga en ese objetivo.aprenderás:- Los diferentes tipos de pruebas en React Native, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos de texto, imagen y código nativo para verificar e interactuar con ellos- El valor de las simulaciones y por qué no se deben evitar- Los desafíos con la asincronía en las pruebas de RNTL y cómo manejarlos- Opciones para manejar funciones y componentes nativos en tus pruebas de JavaScript
Requisitos previos:- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro framework de pruebas unitarias- No necesitas experiencia previa con React Native Testing Library- Configuración de la máquina: Node 16.x o 18.x, Yarn, ser capaz de crear y ejecutar con éxito una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/