Testing examples?

[justindasilva]

I'm taking a look at https://github.com/unjs/nitro/tree/main/test to see if I can make sense of it and try to come up with my own tests to test my endpoints.

I'm wondering what the best practice method would be to write tests for my Nitro server. I'm thinking of using vitest as that's what I see being used in Nitro and H3.

Any help would be appreciated.

[theguriev]

Hey guys.

Yeah, would be cool to see at least one because I have no idea how to test my endpoints :)

[razorfever]

Hi. I'm trying to figure out how to test the Nitro Server endpoints with something like Vitest or Jest. On previous Koa and Express projects I've used supertest to achieve this but can't figure out how to implement this in the Nitro version. Any help would be greatly appreciated.

[Hebilicious]

You can find examples on how to test nitro directly in the tests https://github.com/unjs/nitro/blob/main/test/tests.ts :

• Build and start a nitro server (with listhen for simplicity)
• use any testing framework and send actual request to the endpoint
• Close the server at the end of your test (afterAll hook or equivalent)

[theguriev]

Would you mind providing at least one super simple example? Like GET: /hello-world

In case of supertest it's super simple here I still don't get how to do that properly

[razorfever]

I have tried to parse the information needed from the examples @Hebilicious provided. The closest I've gotten is I'm able to query the endpoints just like in the examples, but seem to be unable to mock further requests to our other micro services (Or really mock anything at all). The usual vi.mock and vi.spyOn methods don't seem to do anything. A simple example would indeed be super nice.

[theguriev]

@pi0 Would you mind providing something?

[KyleXie]

hey, guys, any update here? I'm new to Nitro, I'd like to see how to write tests for my Nitro code, like what people can do with pytest.

[gemmadlou]

My tests bypass the code base also so I can't get code coverage either.

[yshrsmz]

I found this repo
https://github.com/johannschopplich/nitro-starter

It looks like we can run tests with this setup, but it still can't handle hot-reload or partial unit-test.

I really hope some guide or helper module from the official.

[KyleXie]

Hey @yshrsmz, thanks for your sharing.
Another problem I encountered is the server code is not covered in the coverage report, even though I wrote tests for my api endpoints, the coverage report always shows 0. Not sure what happened here.

[yshrsmz]

It runs tests against the compiled code (I mean, files inside .output dir).
So it doesn't show the correct coverage and doesn't re-run tests when we edit server code.

[KyleXie]

oh, I see. Thanks for your reply.

[yshrsmz]

Author of the repo published https://github.com/johannschopplich/nitro-test-utils 👏

[MickL]

I opened an issue for missing documentation but I wonder if there are even any utils for testing?

This repo is a very good start for sure: https://github.com/johannschopplich/nitro-starter
But should the setup utils already bepart of Nitro?

I opened an issue: #2307

[theguriev]

Hey, guys. Here I have prepared a simple example with testing. If you have any questions, I am ready to help you.
https://github.com/theguriev/service-authorization

[marcogrcr]

@MickL, @pi0 While we wait for #2303, I'm wondering what the best practices are for unit testing handlers. I'm particularly interested in mocking event.context as well as dependencies (e.g. I want to trigger unusual code paths like errors or they may be unavailable during CI).

Given the following fixture:

// server/api/echo/[value].post.ts
export default eventHandler(async (event) => {
  const { context: { foo }, method, path } = event;
  const headers = getHeaders(event);
  const routerParams = getRouterParams(event);
  const body = await readBody(event);
  
  return {
    method,
    path,
    routerParams,
    headers,
    body,
    context: { foo },
    externalDep: externalDep()
  };
});

// server/middleware/foo-context.ts
export default eventHandler((event) => {
  event.context.foo = "bar";
});

// server/utils/external-dep.ts
export function externalDep() {
  return "external-value";
}

nitro-test-utils created by @johannschopplich is great for performing an e2e test like the following:

// test/routes/api/echo/[value].post.test.ts
import { $fetch } from "nitro-test-utils/e2e";
import { describe, expect, it } from "vitest";

describe("POST /api/echo/{value}", () => {
  it("e2e", async () => {
    const { data } = await $fetch("/api/echo/data", {
      method: "POST",
      headers: {
        "x-input": "value",
      },
      body: JSON.stringify({ hello: "world" }),
    });

    expect(data).toStrictEqual({
      method: "POST",
      path: "/api/echo/data",
      routerParams: {
        value: "data",
      },
      headers: expect.objectContaining({ "x-input": "value" }),
      body: { hello: "world" },
      context: { foo: "bar" },
      externalDep: "external-value",
    });
  });
});

However, since the nitro server runs in a vitest init script, there's no simple way to mock event.context or the dependencies from within a *.test.ts file. The only workaround I see is to somehow use import.meta.test to achieve this, but the code to mock different outcomes depending on the test can become quite complex.

That being said, I was able to unit test the handler by doing the following:

1. Add explicit import statements to server/api/echo/[value].post.ts:

   // server/api/echo/[value].post.ts
   import { eventHandler, getHeaders, getRouterParams, readBody } from "h3";
   
   import { externalDep } from "../../utils/external-dep";

2. Mock the desired modules (via vitest or other framework), and use h3's toPlainHandler() to invoke the handler with mocked event.context values:

   // test/routes/api/echo/[value].post.test.ts
   import { createApp, createRouter, toPlainHandler } from "h3";
   import { describe, expect, it, type MockedFunction, vi } from "vitest";
   
   import echo from "../../../../server/api/echo/[value].post";
   import { externalDep } from "../../../../server/utils/external-dep";
   
   vi.mock("../../../../server/utils/external-dep");
   
   const externalDepMock = externalDep as MockedFunction<typeof externalDep>;
   
   describe("POST /api/echo/{value}", () => {
     it("unit", async () => {
       const handler = toPlainHandler(
         createApp().use(createRouter().post("/api/echo/:value", echo))
       );
   
       externalDepMock.mockReturnValue("mocked-value");
   
       const response = await handler({
         method: "POST",
         path: "/api/echo/hello",
         headers: {
           "x-input": "value",
         },
         body: JSON.stringify({ hello: "world" }),
         context: { foo: "mocked-bar" },
       });
   
       expect({
         status: response.status,
         headers: new Set(response.headers),
         body: JSON.parse(response.body as string),
       }).toStrictEqual({
         status: 200,
         headers: new Set([["content-type", "application/json"]]),
         body: {
           method: "POST",
           path: "/api/echo/hello",
           routerParams: {
             value: "hello",
           },
           headers: { "x-input": "value" },
           body: { hello: "world" },
           context: { foo: "mocked-bar" },
           externalDep: "mocked-value",
         },
       });
     });
   });

While this "works", the downsides are:

1. I have to add explicit import statements.
2. I have to duplicate the route definition in the test.