Node.js on Martin C. Richards

An Idiots Guide to mocking HTTP with MSW

Tue, 24 Sep 2024 08:18:57 +0200

An Idiots Guide to mocking HTTP with MSW

I recently had some real trouble getting MSW to work with my tests. It seems like I ran into a few gotchas that I’ll try to explain here.

For context, I’m using Vitest as my test runner and openapi-react-query to make my API calls.

MSW not matching any of my requests

After setting up MSW as per the docs

import { beforeAll, afterEach, afterAll } from 'vitest'
import { setupServer } from 'msw/node'
import createFetchClient from "openapi-fetch";
import createClient from "openapi-react-query";
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript

// Setup openapi-react-query client
const fetchClient = createFetchClient<paths>({
    baseUrl: "https://myapi.dev/v1/",
});
const $api = createClient(fetchClient);

// create a mock server and log all requests
const server = setupServer()
server.events.on('request:start', ({ request }) => {
  console.log('Outgoing:', request.method, request.url)
})

const Wrapper = ({ children }: { children: React.ReactNode }) => {
    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
})

const Component = () => {
    const { data, error, isLoading } = $api.useQuery(
        "get",
        "/blogposts/{post_id}",
        {
        params: {
            path: { post_id: 5 },
        },
        },
    );

    if (isLoading) return <div>Loading...</div>
    if (error) return <div>Error: {error.message}</div>

    return <div>{data.title}</div>
 }


describe('MSW', () => {
    // start, clear and close the server
    beforeAll(() => server.listen())
    afterEach(() => server.resetHandlers())
    afterAll(() => server.close())

    it('should work', async () => {
        // setup a mock handler for the /blogposts/{post_id} endpoint
        server.use(
            http.get("/blogposts/{post_id}", () => {
                return HttpResponse.json({title: "My Blog Post"})
            })
        )

        await act(() => render(<Component />, {wrapper: Wrapper}))
        await waitFor(() => screen.getByText("My Blog Post"))

        // assert that the request was made
        expect(data).toBeDefined();
    });
})

If I run this test it will fail and my console.log will not be hit showing me that the request was intercepted by MSW.

Deploying NodeJS with pnpm and tsx

Sun, 12 Nov 2023 11:55:26 +0100

Deploying NodeJS with pnpm and tsx

In the previous post we packaged our NodeJS application as a single “binary” by bundling everything into single file that can deployed without the need to for the node_modules. Unfortunately this is a bit of an esoteric way to package a NodeJS application, with many packages relying on the node_modules to be included on disk. Meaning you either can’t package your application this way when using packages that dynamically read files from the node_modules folder or you have to copy the required files over to the dist package, which ends up being a bit of a hack.

Deploying NodeJS Apps with ESBuild and Docker

Sat, 28 Oct 2023 12:42:02 +0200

Building NodeJS Apps with ESBuild and Docker

NodeJS is famous for it’s the ridiculous size of the node_modules, which can easily baloon into a gigabyte of files on disk. In the frontend world it is common to treat your final app as essentially a compiled binary, packaging and compressing the application and it’s depencdencies into a single file.

We can do the same with our NodeJS projects! Compiling them into a single file and putting it in a Docker image.