view-transitions VS msw

true, but HTML-only websites are often pretty clunky

infuriatingly, if HTML had just a bit more oomph, we could make a lot better websites with it, but they haven't been moving HTML forward as a hypermedia for decades now (see https://htmx.org for what I mean, they could implement this concept in the browser in a week, and it would change web development dramatically)

the upcoming view transitions API will help:

https://github.com/WICG/view-transitions

but, still, there are some really obvious and simple things that could be done to make HTML much more compelling (let's start by making PUT, PATCH and DELETE available in HTML!)

Cool answer: Look at shared element transition. this is gonna be really cool one day, sadly not yet out of the proposal state... https://github.com/WICG/shared-element-transitions

Native features faster: Quickest path to utilizing native features/UX improvements once they are released, no need to wait for a third party implementation. Example: shared element transitions first came to native, then were replicated on the web.

Lol yes, can’t edit now sorry.

1: https://github.com/WICG/shared-element-transitions

I took the experimental page transition API (a.k.a. shared element transitions) for a test drive with SvelteKit, and the result was pretty slick. You’ll need Chrome Canary with the chrome://flags/#document-transition flag enabled if you want to try this one out yourself — the original tweet has a video if you don’t want to jump through those hoops. There’s a live demo and a GitHub repo if you want to see how it was accomplished.

Here is link number 1 - Previous text "yet"

There's also the developer guide https://github.com/WICG/shared-element-transitions/blob/main/developer-guide.md.

One of the core functionalities I wanted to test involved integrating with the Gemini API. Since I didn’t want to rely on the live API for testing, I decided to mock the API calls. Initially, I tried using Nock, but I ran into issues because it didn’t work well with Node’s default fetch implementation. It seemed that the Gemini library was using the default fetch instead of a third-party fetch implementation, which caused the mock to fail. After several attempts without success, I switched to another library called MSW (Mock Service Worker). Although it required a bit more setup to create a mock server, it worked flawlessly on the first try. I crafted an example response based on how the Gemini API would respond, which allowed me to test the refactored functionality.

Mock Service Worker (MSW) could not mock Server Side calls in NextJS 14 when using App Router. NextJS 15 has fixed that.

P.P.S. MSW is a bit overkill and is used for different purposes, like other HTTP mocking libraries.

This method of testing was inspired by the fantastic work of developers who have created invaluable tools and resources for the community. Special thanks to Kent C. Dodds for revolutionizing UI testing with Testing Library and for his extensive educational content. A heartfelt shoutout to Artem Zakharchenko for developing MSW, which greatly simplifies mocking network calls. Another huge thanks to the team behind Faker that allows us to create production-like datasets with ease.

Zustand supports the Jest and Vitest test runners to mock and test your store. If your store makes network requests, Mock Service Worker (MSW) is an efficient library to intercept the network requests and return data for your assertions.

Consider a service worker to be a middleman between your client and servers, capable of handling all requests passed between them. You might have come across mock service workers, which let you test through several situations. Service providers have enormous power that allows a broad spectrum of possibilities. To simplify the use of service workers, SvelteKit requires only the inclusion of a service-worker.js file in the source directory. It automatically handles the registration process, thereby eliminating the need for manual registration that is typically required with other systems. This simplified strategy replaces the need for outside libraries to support this process.

I recently started working on integration tests for a React application with Redux-connected components, specifically Redux-Toolkit. I quickly learned a common tool to use is the Mock Service Worker (MSW) library to mock network requests; this library allows you to intercept outgoing network requests and mock their responses making it super easy to test the implementation details of your components.

Mock Service Worker - https://mswjs.io/ (Mocking the API Responses in the browser without creating a separate mock server)

We’re going to use Mock Service Worker (MSW) for mocking network requests in our integration tests and in the app during development.

However, I discovered a great combination that transformed my API call testing in TypeScript: Vitest and Mock Service Worker (MSW). Their well-crafted design makes them incredibly easy to use, enhancing the overall testing experience.