Scaffolding for unit testing

[josecelano]

I've been trying to setup Jest for unit testing.

Attempt: https://github.com/torrust/torrust-index-frontend/pull/159

I haven't been able so far. It seems it's not supported yet.

I think we should be able to write three types of tests:

• Unit testing (the one I was trying to setup. I wanted to add tests for the sanitizer functions)
• Integration (or whatever you wan to call them) where you can mount vue components, mock API requests, etcetera.
• E2E tests. The one I've already set up with cypress and you can run with npm run cypress:run

Notes

• Cypress Component Testing works with Nuxt 2. Nuxt 3 is not yet supported.

Links

• support for unit testing in a nuxt environment

[josecelano]

Cypress can also be used for unit testing, but I get the same error:

The error was:

Error: Webpack Compilation Error
./src/domain/services/sanitizer.ts
Module not found: Error: Can't resolve '#imports' in '/home/josecelano/Documents/git/committer/me/github/torrust/torrust-index-frontend/src/domain/services'
resolve '#imports' in '/home/josecelano/Documents/git/committer/me/github/torrust/torrust-index-frontend/src/domain/services'
  Parsed request is a module
  using description file: /home/josecelano/Documents/git/committer/me/github/torrust/torrust-index-frontend/package.json (relative path: ./src/domain/services)
    Field 'browser' doesn't contain a valid alias configuration
    Looked for and couldn't find the file at the following paths:

[Wolfremium13]

At unit testing level what do you prefer vitest or jest?

[josecelano]

At unit testing level what do you prefer vitest or jest?

Hi @Wolfremium13 I've only used Jest. The only thing I know about vitest is that It's supposedly faster. Any recommendations for this project?

[Wolfremium13]

The truth is that it's a matter of preferences. I'm not an expert in front-end to make a recommendation, but I have found the vitest experience more enjoyable compared to jest. Perhaps we should do a proof of concept by adding one of the two and see if everything works correctly in Nuxt. So far, we have noticed that Jest may not be suitable, and we could try the other one. What do you think?

[josecelano]

The truth is that it's a matter of preferences. I'm not an expert in front-end to make a recommendation, but I have found the vitest experience more enjoyable compared to jest.

Why?

Perhaps we should do a proof of concept by adding one of the two and see if everything works correctly in Nuxt. So far, we have noticed that Jest may not be suitable, and we could try the other one. What do you think?

I do not think it's a problem related to using vitest or jest, but I would definitively use give it a try to vitest before writing more tests.

I have to research a little bit, but I have the feeling that unit testing is not a priority for Nuxt. I do not see any updates in the documentation or issues. For example:

https://github.com/nuxt/nuxt/discussions/18399

Since we do not have much to test for now, I suggest postponing this issue. If we need to start adding features we want to decouple from the framework and unit test them, then it's a better idea to use a separate domain repo for our custom logic.

[Wolfremium13]

Why?

Sorry for being late xD, on my expirience with vite it goes super fast compared with Jest, so you can reduce the feedback loop with almost exactly the same API.

I was doing some "unit" testing on my blog and I want to share it with you here. It is a very simple use case but enough to see what's the behaviour of the component. Do you want to have unit tests like those?

[josecelano]

Why?

Sorry for being late xD, on my expirience with vite it goes super fast compared with Jest, so you can reduce the feedback loop with almost exactly the same API.

I was doing some "unit" testing on my blog and I want to share it with you here. It is a very simple use case but enough to see what's the behaviour of the component. Do you want to have unit tests like those?

Hi @Wolfremium13 no worries. For component testing like in your blog I was planning to use cypress but it seems there is only support for Nuxt 2 and is still in beta. I guess I could use directly Nuxt for testing but the documentation is still a work in progress :-/. So not much support for testing with Nuxt.

But, I'm not planning to add such a component test right now, although it would be a nice feature. What I was trying to do was just test code that is not coupled to the framework. Basically the code in this folder: https://github.com/torrust/torrust-index-frontend/tree/develop/src/domain/services

I suppose I could extract those services into a local npm subpackage and run the unit tests but for now (since we do not have that much code) I will wait to see if Nuxt improves the testing support and documentation.

[josecelano]

Relates to: https://github.com/nuxt/test-utils/issues/297