How to use this with unit tests?

[eratio08]

As this is a vite plugin it won't be utilized when running unit test and all components won't be transformed.
Is there any trick to get this working with the vue-test-utils / jest?

[husayt]

@antfu seems like quite a few people stumbling with this. Is there a solution for using this plugin with unit testing?

[antfu]

I would suggest to use cypress, which will just work.

[husayt]

Yes, but they are different things. I use cypress and that works fine. But what about testing components in isolation i.e. unit tests?

[marktnoonan]

@husayt Cypress has a component testing solution for Vue now that's built on top of Vue Test Utils + Vite - it came out in the last couple of major Cypress versions. This might be what @antfu is referring to. I haven't tested it with this package but I've been using it where I would have used jest component tests in the past: https://www.cypress.io/blog/2021/04/06/getting-start-with-cypress-component-testing-vue-2-3/

[sampullman]

I have high hopes for vite-jest, if/when that's stable it should solve this problem. I'm running in to the same issue with vite-plugin-components, and some of my own Vite plugins.

Another option is to write a standalone Jest transformer, maybe some of the internal plugin logic here can be reused.

[doutatsu]

Bumping this up - was really excited to make use of it, now that I migrated to Vite... but with 500+ unit tests, this needs to be fixed first 😬

[eratio08]

So the simple answer to this seems to be now: Use vitest for testing!

[casey6]

⚠️ DISCLAIMER: Vitest is still in development and not stable yet. It's not recommended to use it in production.

[doutatsu]

^ Exactly. Vitest seems interesting, but it's not battle-tested like Jest is, so it's still be best to wait for vite-jest to ship

[tetiana-pozniakova]

@eratio08 how do you solve this with vitest? do you have any examples?
I mean all components are rendered but I can't use stubs with vitest using this plugin. Is it an issue with vue-test-utils?

[eratio08]

@TetianaPozniakovaClone I did not try to use this plugin yet but using vite + vitest should allow to at least make the code injection/generation that is done by this plugin work that would not work with jest before.
What kind of stubs are you talking about? Component Stubs or just general stubs/mocks? I never tried to stub components to far. I use vitest for mocking and vitest-mock-extended for typescript class/interface mocking. Where do your stubs need to be injected?

[tetiana-pozniakova]

@eratio08 yes, components stubs.
Here's my code:
const wrapper = mount(HomePage, { global: { mocks: { $t: (_) => _, }, stubs: ['items-list'], plugins: [createTestingPinia()], }, })

And somehow items-list is only stubbed when I explicitly add:
import ItemsList from '@/components/ItemsList.vue'
to the HomePage. Otherwise, plugin just renders the whole component.

P.S. I think I should create a new thread for this :)

[eratio08]

Mh I never had a use case for stub components to I cant comment on that. I would just use shallowMount.