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.

[Neophen]

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

This doesn't work with with stubs:

example:

import { describe, it, expect } from 'vitest';
import { render } from '@testing-library/vue';

import SomeComponent from './SomeComponent.vue';

describe('SomeComponent', () => {
  it('renders correct template styles', async () => {
    const { html } = render(SomeComponent, {
      stubs: [
        'SomeComponentHeader',
      ],
    });

    expect(html()).toMatchSnapshot();
  });
});

If I import SomeComponentHeader explicitely then this works as expected, but when using auto-import it just renders the full SomeComponentHeader inner html.

Use case:
When using tailwind you can catch style changes with snapshot tests.
And you only want to see the styles of the current component under test, so as not to make tests fail when the child element styles update.

For now i'm resorting to simply have the imports in file. but would be nice to figure out why this doesn't work with vitest + Vue Test Utils out of the box?

Shallow mount solves this a bit but you get this snapshot, with anonymous-stub

// Vitest Snapshot v1

exports[`SomeComponent > renders correct template styles 1`] = `
<div class="p-4 rounded-md">
    <anonymous-stub some-prop="Some prop"></anonymous-stub>
</div>
`;

as opossed to some-component-header-stub which gives you context that the children haven't changed:

// Vitest Snapshot v1

exports[`SomeComponent > renders correct template styles 1`] = `
<div class="p-4 rounded-md">
    <some-component-header-stub some-prop="Some prop"></some-component-header-stub>
</div>
`;

[JJBocanegra]

There is no workaround for this yet? 😭

[Djaler]

@Neophen that's because unplugin-vue-components injects component reference inside render-function, not in components option of component. And vue-test-utils stubs works by patching components

[Djaler]

This fix should allow stubbing autoimported components vuejs/vue-test-utils#2017

[philly-vanilly]

I am glad at least some migration tooling like this lib exists but what kind of suggestion is that to "just use cypress"? I have around 1500 unit tests. There is no way I am rewriting them in Cypress.

I appreciate this lib as a temporary solution (too bad tooling like this does not come from the official Vue team), but if I had to use it permanently, I would rather rewrite the frontend in Angular or React than keep using Vue.

@Djaler I am on 1.3.6 and it still does not work