Mocking hilla endpoint with vitest

Any hints or ideas on how to mock hilla endpoints using vitest?

I think mocking generated endpoint modules is the way to go. https://vitest.dev/guide/mocking.html#modules explains mocking modules, should work for Hilla generated endpoint modules too.

Thanks! I managed to mock an endpoint with:

vi.mock('Frontend/generated/endpoints');
vi.mocked(UserEndpoint.createUser).mockResolvedValue(mockedUser);

The problem was that the createUser is async and my IDE (IntelliJ IDEA) was complaining about that. Adding // @ts-ignore helped. I also noticed it is possible to test private functions although IntelliJ IDEA shows it as an error. I.e. so far so good. Now I’m trying to figure out how to configure vitest appropriately. I would like to have my test files in a separate folder, like ‘test’ or ‘frontend_test’. The challenge then is to manage the config. Using relative import paths in my test files or a resolve-alias config in the vitest.config.ts seem to work but is rather ugly. Ideally I would like imports generated by IntelliJ to work in the test files. The following setup gives me that:

vitest.config.ts:

import { defineConfig } from 'vitest/config'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
    test: {
        globals: true,
        environment: 'happy-dom',
        clearMocks: true,
        deps: {
            inline: ['@hilla', '@vaadin'],
        },
    },
    plugins: [tsconfigPaths({
        projects: ["./tsconfig.json"],
        root: '.'

    })],
})

Along with a few modifications to the tsconfig.json:

    "baseUrl": ".",
    "paths": {
      "@vaadin/flow-frontend": ["frontend/generated/jar-resources"],
      "@vaadin/flow-frontend/*": ["frontend/generated/jar-resources/*"],
      "Frontend/*": ["frontend/*"],
      "Test/*": ["frontend_test/*"]
    }

and

  "include": [
    "frontend/**/*.ts",
    "frontend_test/**/*.ts",
    "types.d.ts"
  ],

Manually modifying the generated tsconfig.json is apparently not a good solution since it is reset by the vaadin maven plugin. As explained here: https://github.com/vaadin/flow/issues/7532 I found out it is still being reverted in Hilla 1.3.1. Any ideas or solutions highly appreciated :slightly_smiling_face:

I think you’re on the right track, the proposed changes to add a separate frontend test source directory make sense to me, and we should consider adding those to the default configuration.

Generally manually editing tsconfig.json should be supported, but right now there are some issues, apparently. While the old quoted issue was fixed, but there was a recent change reintroducing automatic changes to tsconfig.json as sometimes we need to update it when you migrate from one version of Vaadin / Hilla to another.

Now that changing tsconfig.json is tricky, perhaps we could create a separate frontend_test/tsconfig.json TypeScript project definition, which could extend the base one, and add the test aliases on top of it? Also this new config needs to be specified in vitest.config.ts, so that Vitest uses it.

Here is an example frontend_test/tsconfig.json, this worked for me in VSCode to add the Test alias:

{
  "extends": "../tsconfig.json",
  "include": [
    "./**/*",
  ],
  "compilerOptions": {
    "baseUrl": "..",
    "paths": {
      "Test/*": [
        "frontend_test/*"
      ]
    }
  }
}