Mocks

Mocking API calls is important not only for testing (which is where it's more often associated), but also during development. It makes you faster at releasing features because it allows you to work in parallel with the team responsible for the API you're calling and it also helps you avoid issues with keeping private keys locally and if the service ever falls over you can continue to develop.
The de-facto standard for mocking API calls in Node.js applications is MSW. MSW is a library that can run in both the browser and on the server and allows you to intercept any request made by your application. It gives you the opportunity to either let the request go through to the original endpoint or to return a mocked response.
Here's a simple example of setting up a mock for an API call (modified) from their docs:
import { http, HttpResponse } from 'msw'
import { setupServer } from 'msw/node'

const server = setupServer(
	// Describe the requests to mock.
	http.get(
		'https://example.com/book/:bookId',
		({ request, params, cookies }) => {
			return HttpResponse.json({
				title: 'Lord of the Rings',
				author: 'J. R. R. Tolkien',
			})
		},
	),
	http.post('/users/:userId', async ({ request, params, cookies }) => {
		const { userId } = params
		const data = await request.json()
		// do something with the data
		return HttpResponse.json({
			id: userId,
			firstName: 'John',
			lastName: 'Maverick',
		})
	}),
)

server.listen({ onUnhandledRequest: 'warn' })
With this set up and running within your server, any request made to a URL matching those patterns will be intercepted by MSW and return a mocked response instead.
πŸ§β€β™‚οΈ Like I said, I already got some things set up for you, so you'll just need to add a mock for the resend email API call. You'll also need to be the one who gets the mocks file imported and sets the right environment variable during development to enable that.
πŸ‘¨β€πŸ’Ό I recommend you start in the file to add the mock, and then set the MOCKS environment variable in , and then finally import the mocks file in .
Once you're done, you should be able to do another test by calling sendEmail from within and you'll see the email that was sent is logged to the console!
Login to get access to the exclusive discord channel.
  • general
    Welcome to EpicWeb.dev! Say Hello πŸ‘‹
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    This is the first post of many hopefully!
    • 18
    81 Β· a month ago
  • general
    npm install everytime I setup a new playground
    Duki 🌌:
    Is it normal that I have to run `npm install` in my playground directory, everytime I setup the play...
    • βœ…1
    2 Β· 2 months ago
  • πŸ”auth
    The latest web-auth workshop cannot be launch
    QzCurious 🌌:
    I've done: 1. Remove web-auth directory 2. Follow https://github.com/epicweb-dev/web-auth?tab=readme...
    • βœ…1
    7 Β· 3 months ago
  • general
    Migration to Vite: Server-only module referenced by client
    Fabian 🌌:
    Hi, I'm working on migrating to Vite following the remix docs (https://remix.run/docs/en/main/guides...
    • βœ…1
    1 Β· 4 months ago
  • πŸ”auth
    Github token added on refactor of connection model exercise
    abraham_aguilera 🌌:
    Where does the newly created `GITHUB_TOKEN` come from in the `resolveConnectionData` introduced in t...
    • βœ…1
    2 Β· 6 months ago
  • πŸ”auth
    Potential Security Concern with Empty Session Data in createCookieSessionStorage?
    QzCurious 🌌:
    Since session data can be an empty object, it seems possible that someone could guess when encrypted...
    • βœ…1
    6 Β· 3 months ago
  • general
    Remix Vite Plugin
    Binalfew πŸš€ 🌌:
    <@105755735731781632> Now that remix officially supports vite (though not stable) what does it mean...
    • βœ…1
    3 Β· a year ago
  • general
    πŸ”­foundations
    Solutions video on localhost:5639 ?
    quang πŸš€ 🌌:
    Hi, so I'm having a hard time navigating (hopefully will be better with time) The nav on epicweb.de...
    • βœ…1
    9 Β· a year ago
  • πŸ”auth
    Where are we getting target_type from?
    Salym πŸš€ πŸ† 🌌:
    I don't see target_type in ur verification schema, how are we generating this?
    • βœ…1
    9 Β· 6 months ago
  • πŸ”auth
    Unknown file extension ".png" for ".../user.png"
    TraderDave79 🌌:
    I'm going through the `web-auth` module and in the "Require Authenticated" exercise, after making th...
    • βœ…1
    9 Β· 7 months ago
  • πŸ”auth
    github.com refuses to connect in workshop app
    TraderDave79 🌌:
    Web Authentication / OAuth / 02. GitHub Strategy / Problem & Solution apps, when clicking "Login wit...
    • βœ…1
    3 Β· 6 months ago
  • general
    Epicshop is now social and mobile friendly!
    Kent C. Dodds β—† πŸš€πŸ†πŸŒŒ:
    I'm excited to announce that now the Epic Web workshops are mobile friendly! https://foundations.ep...
    • πŸŽ‰2
    0 Β· 6 months ago
  • πŸ’Ύdata
    general
    πŸ“forms
    πŸ”­foundations
    double underscore?
    trendaaang 🌌:
    What with the `__note-editor.tsx`? I don't see that in the Remix docs and I don't remember Kent talk...
    • βœ…1
    2 Β· 7 months ago
  • πŸ”auth
    RBAC with Entity scoping
    abraham_aguilera 🌌:
    Hi all! I'm working on implementing access control but I want to be able to scope permissions per en...
    • βœ…1
    3 Β· 7 months ago
  • πŸ”auth
    πŸ’Ύdata
    08. ROLE-BASED ACCESS / 02. ROLES SEED - migration to local vs production
    Fabian 🌌:
    So I'm in a bit over my head with this one, in particular with how migration works in a local env vs...
    • βœ…1
    1 Β· 7 months ago
  • πŸ”auth
    Redirect Cookie > 03. Redirect missing ProgressToggle form
    RomΓ‘n πŸ† πŸš€ 🌌:
    This last exercises of the Auth module isn't showing the ProgressToggle form for some reason. I fork...
    • βœ…1
    5 Β· a year ago
  • πŸ’Ύdata
    πŸ”auth
    Prisma batching in the Require Authorized (07/03/solution)
    ajara 🌌 πŸš€:
    When I did the `requireUser` function in `auth.server.ts` I thought about using `requireUserId` func...
    • βœ…1
    4 Β· 8 months ago
  • πŸ”­foundations
    πŸ’Ύdata
    general
    πŸ“forms
    πŸ”auth
    Native Logging
    trendaaang 🌌:
    I was thinking that it could be useful to log every CRUD operation to help track down errors. Is tha...
    • βœ…1
    6 Β· 8 months ago