🎉 Announcing MSW 2.0! 🎉
🌎 Migration guidelines:
📰 Release notes:
365+ days in development, 200+ commits, 40+ contributors involved. The future of API mocking is here, and it has never been brighter.
It's insane that with almost 5 million downloads per month and adoption by companies like Google, Microsoft, Spotify, and countless others, MSW still remains a hobby project developed in spare time.
Perhaps it's a good time to give back.
Hello, friends!
We are working on the biggest API change we've had since the day MSW was released. And it's going to be incredible.
We've written a migration guide to showcase the breaking changes:
📙
Please, let us know what you think.
#mswjs
We're on the mission to help you write better tests by properly mocking your API.
Enjoy the declarative API mocking approach that MSW gives you, and the ability to reuse the SAME mocks in a browser, React Native, Electron, etc.
#javascript
#api
#mocking
#testing
#mswjs
#tip
This is happening!
We've officially opened a request to consider MSW as the default API mocking solution in Create React App.
We'd appreciate your support on that issue if you enjoy using MSW and would like for it to improve.
Thank you.
As a huge thank you to all the current and future users of MSW we are launching a brand new website!
🤩Simplistic design
✅Feature highlights
📘Docs rewritten from ground-up (including a step-by-step tutorial for beginners!)
#javascript
#mocking
#api
Given that
@TestingLib
is the default testing solution for Create React App, and that 99% of developers would make async requests they need to test, how long will it take for MSW to become the Testing Library's companion in that template?
👀
Mock Service Worker is now proudly listed in the "Trial" category by Tech Radar! 🥳
Thanks to everybody who's been using MSW to achieve incredible tests and fast prototypes!
Let's make the new standard of API mocking on the web. Together. ❤️
#javascript
#api
#testing
#mswjs
Remember: you don't need to mock fetch/axios/Apollo additionally to using MSW. Just delete that code. Yeap, no extra mocks. Let it run as it runs in production.
We're excited to bring a new package into our ecosystem! 🎉
Read more about the "http-middleware" that allows you to spawn an actual server using your request handlers as API routes:
📰
#javascript
#testing
#api
#mocking
#mswjs
MSW will be celebrating its 5th anniversary this year. Time goes by but our values remain the same. We are here not just to provide you with API mocking capabilities but to research and challenge previous mocking implementations, striving to new horizons in the field. Here's how.
We're experimenting with the idea of the request interception in a child process in Node.js. This means you're able to spawn a production build of the app and control its network requests from a parent process.
The foundation has been already released:
Woohoo! We've reached 100k downloads per week! 🥳
Those are numerous teams building and testing their products with confidence. Happy to be a part of their journey!
#api
#mocking
#testing
#frontend
#nodejs
#msw
We've reached 10,000 stars on
@github
() 🎉
Thank you to everyone for your love!
You can also support us financially via to help us ensure a stable future for MSW.
#javascript
#mswjs
#testing
#github
📦 msw
@1
.1.0 is out with its biggest change being the added support for the global "fetch" in Node.js!
Using "setupServer()" now intercepts global "fetch" calls in Node.js. Give that a try and let us know how it goes!
Imagine if MSW automatically inferred path parameter types from your paths.
👉 When would you want to override those inferred types?
We are considering dropping the explicit "Params" generic from the handlers and relying on automatic inference instead. What do you think?
We've just read through your feedback on the next MSW version and it seems that everything is resolved!
If you haven't tried msw
@next
yet, please do and let us know about your experience in
#mswjs
#javascript
Use generator functions to describe HTTP polling with MSW. Here's an example of a weather endpoint returning different data on subsequent calls, written with msw
@next
.
One of the brilliance of MSW is that by introducing a single predictable layer for API mocks, your tests become detached from the level at which the actual requests happen. It may be a direct component, or a deeply nested child—your mocking setup is the same.
We've got a great suggestion from
@kentcdodds
to migrate over fetch's "Request" and "Response" as the public API:
What do you think? How do you see this next public API?
#testing
#mswjs
#javascript
Now
@TestingLibrary
docs officially recommend using
@kettanaito
's to handle testing your HTTP calling components/utilities:
(rather than mocking fetch, axios, apollo, etc.)
Our
@Cypress_io
friends, what is the correct, most efficient way of using MSW in Cypress? Is it via a custom plugin that'd import and await MSW's worker?
Please, let us know. We'd like to update the Cypress example for everyone in the community. Thanks!
There is no place for war in the modern world. We are sickened and heartbroken at this senseless aggression from Russia. This has to stop.
We send our love and support to Ukraine and her people 🇺🇦 Peace will prevail.
The new is out, and with it completely revamped, rewritten docs. We'd like to share with you what changed and why over the course of this week.
Let's start with the "Getting started" tutorial:
MSW is designed to scale.
Imagine using fetch, Axios, Apollo, URQL, SWR, and being able to intercept those requests with the same request handlers.
Because you're mocking the network, not request clients.
#javascript
#mswjs
#testing
#api
It's tempting to "test that a request was made with correct data", or that a request has happened at all. Unfortunately, it's a sign of implementation detail testing.
👉Read on how to approach request-related assertions:
#api
#testing
#javascript
#msw
We are working hard to bring the V2 release to all of you in the upcoming month. Please, if you have the chance, consider sponsoring us on GitHub 🙏
Grateful for your support!
📰 Our new docs finally include the "Best Practices" section!
We want to accumulate a collection of practices that we've been promoting for years but also those we've learned from you! All in a single place for everyone to learn.
Excited to publish msw
@0
.19.3!
✅Fixes an issue with partial "RequestOptions" from third-party request issuing libraries in
@nodejs
✅Adds support for
@GraphQL
operations using GET method
Update your apps for the stunning
#api
mocking experience.
#javascript
#testing
Imagine taking a snapshot of your network at any point in time, putting it next to your test, and getting an API mock that runs reproducibly every time.
Top 3 root causes for issues with MSW during testing:
1. Enabled caching during tests.
2. Improper awaiting asynchronous UI updates (i.e. not misusing "waitFor").
3. Request URL mismatch (often due to forgotten env variables in the URL).
📦 msw
@0
.31.0 is out!
We're excited to resolve
@reactnative
compatibility issues and should be fully functional in React Native!
A grand shoutout to Drew Miller () for his great work on investigating and fixes.
We are absolutely STUNNED to see 4,000 incredible developers following us on our journey! 🎉🎉🎉
We would like to thank each and every one of you for your constant support and encouragement. It helps us move forward. It helps us improve API mocking for everyone.
🧑🎓 New video: learn the best practices around structuring your request handlers as your mock setup evolves.
Let us know if you found it useful in the comments on the video!
#javascript
#api
#testing
#mocking
#mswjs
🥳We finally have an official NextJS usage example!
✅Full-scale client-side API mocking
✅Seamless server-side mocking (i.e. in getServerSideProps)
Big thanks to the
@vercel
team for support and cooperation!
#api
#testing
#mocking
#frontend
#nextjs
We are looking for contributors experienced with NextJS and Cypress to improve MSW integration with those great technologies.
If you're interested, reply to this tweet. Thank you!
#javascript
#msw
#api
#mocking
#opensource
We've added the React Native integration guidelines to the docs: .
But they are incomplete. Please, if you are a React Native developer, follow those instructions and let us know about any issues. Let's write the prefect guidelines together! Thank you.
We are truly blessed to have an incredible community 🙌
MSW is a project born out of a love for technology and innovation. We care about solving your API mocking challenges in the most efficient and seamless way possible, giving you a superb DX.
Our most recent FOSS Fund landed today:
Microsoft's employees who contribute to open source chose to sponsor
@NVAccess
,
@urllib3
,
@ApiMocking
, the GNU compiler collection & the Rust command line argument parser (clap). Find out more at ✨✨✨
A hands-down fantastic overview of MSW integration in a Next.js app from
@jmagrippis
!
Learn how to set up mocks, enable them for browser demos *and* for your integration tests. All sharing the same network scenarios. 👏
#javascript
#testing
#api
#mswjs
We want you to have the best development experience when working with MSW. Meet 0.24.1 🥳
✅Documents the API via JSDoc to be available right in your IDE
✅Each API now has a usage example and a link to the docs
#api
#javascript
#mocking
#testing
With the latest release of the next candidate, MSW should be 100% compatible with CommonJS and ESM.
If you gave the next API a try, please update to see if the issues you experienced were fixed:
👉 npm i msw
@next
@housecor
You should also consider the .use() API that allows you to prepend network behavior overrides whenever you wish:
This is the same for setupServer and setupWorker. For in-browser testing, you may expose the worker instance on the window in order to access
☑️ "req.passthrough()" (0.40.0)
A new API to explicitly state that you wish to bypass (perform as-is) the intercepted request. Let's make our mocking intentions clear!
#javascript
#api
#mocking
#testing
#mswjs
Addon ecosystem 2.0 launched!
Addons supercharge your workflow. They can self-configure integrations and automate UI testing.
🧩 Browse 200+ addons in one place
🛠 Build your own in 2hrs
📕 In-depth tutorials
📐 Comprehensive docs
Want to streamline your UI development process? Start using Storybook and
@ApiMocking
to mock data for your app!
Check out
@theaislinnhayes
's article to learn how to get started with this powerful combo 👇