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!

This talk has been presented at TestJS Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

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.

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.

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
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.
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
This Talk discusses the challenges of testing in React and React Native applications, particularly with regards to barcode scanning. It explores the violation of separation of concerns in React and proposes the use of the HumbleObject model to simplify testing and improve code cleanliness. The MVP model is also introduced as a way to separate UI state and logic from the component. The importance of following patterns, standardization, and teaching principles is emphasized, along with the benefits of using custom hooks to share business logic. The potential of AI tools in code refactoring is mentioned as well.
Quizá No Necesitemos Pruebas de Componentes
Vue.js Live 2024Vue.js Live 2024
26 min
Quizá No Necesitemos Pruebas de Componentes
Component testing is a gray area between integration and unit testing. The demo app focuses on the cart component and writing test cases for Playwright component test and VTest. The first cart test encounters a bug with the invisible method in View Test.
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
This Talk discusses the safe handling of dynamic data with TypeScript using JSON Schema and TypeBox. Fastify, a web framework, allows developers to validate incoming data using JSON schema, providing type safety and error handling. TypeBox is a powerful library that allows developers to define JSON schemas and derive static types in TypeScript. The combination of JSON schema, TypeBox, and Fastify provides powerful tools for type safety and validation of dynamic data.
Probando Aplicaciones Vue 3 con Mock Service Worker
Vue.js London 2023Vue.js London 2023
24 min
Probando Aplicaciones Vue 3 con Mock Service Worker
This Talk discusses testing V3 applications with Mock Service Worker, which is a library that allows simulating server responses in tests. It covers setting up Mock Service Worker by creating mock API responses and connecting it with the application. The Talk also explains how to write unit tests for asynchronous components using Vue's suspense component. It demonstrates how to test components that interact with APIs and handle error responses. Additionally, it mentions the testing library for components without API calls and emphasizes the importance of testing component interactions and API integration.
Pruebas de Componentes con Vitest
TestJS Summit 2023TestJS Summit 2023
29 min
Pruebas de Componentes con Vitest
This Talk explores the challenges of choosing and learning testing frameworks, emphasizing the importance of planning, automation, and prioritizing unit testing. The VTEST framework is introduced as a fast and stable option for unit testing JavaScript and TypeScript code, with a focus on logic and mocking external dependencies. The Talk also covers testing React hooks, integration testing with TestingLibraryReact, component testing, and achieving code coverage. Best practices include performing accessibility tests, planning tests before coding, and using data test IDs for stability.

Workshops on related topic

Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue
Vue.js Live 2024Vue.js Live 2024
163 min
Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue
Workshop
Juan Andrés Núñez Charro
Juan Andrés Núñez Charro
Los Composables (funciones de composición) son funciones con estado/sin estado que pueden aprovechar la API de reactividad de Vue, desacoplándola de los componentes.Este cambio de perspectiva abre la posibilidad de abordar escenarios comunes de una manera nueva y creativa. En este masterclass, aprenderás cómo resolver problemas típicos que enfrenta cada desarrollador de Vue, utilizando composables:
- Almacenamiento de datos;- Comunicación entre componentes;- Funciones de utilidad (DOM, API, etc);Y más.
Introducción a React Native Testing Library
React Advanced 2022React Advanced 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/