How to pass props into mocked component

[DenFin]

I am trying to set up our Nuxt 3 application with nuxt-vitest to test our components, composables, utils and whatnot.

I got the setup running and it successfully tests simple Javascript util functions. Now I want to test a component. Let's say I have a Button component which has a prop of text and i simply want to check if the text gets rendered. I tried mocking the component and passing the props into it and then check for the given text via testing-library.

Here is an example

Unfortunately this does not work and as far as I can see the documenation isn't very detailed on this at the moment. Maybe we could extend the documentation on the mockComponent part and extend the example in the playground

I would like to understand what would be the best way to test a component in nuxt-vitest and would appreciate any pointers in the right direction.

[ksullivan-dev]

The 'correct' way, as least according to the original PR and test, would be to pass props in the options of the second arg of renderSuspended (you can see the original PR here - https://github.com/danielroe/nuxt-vitest/pull/302/files#diff-cb778e074ac7f82cf4207815ac7bdc5ff2523c4929bb66d1e803144a6131cb5aR44). But that's not working in the StackBlitz that you provided, so there might be something wrong with that environment's setup. I haven't tried locally yet. I was able to implement this locally and it was working correctly.

This should work for the test you've got set up:

await renderSuspended(BaseButton, {
    props: { text: 'This is the BaseButton' },
  });

[DenFin]

Thanks for your reply @ksullivan-dev. Unfortunately I ran into another issue with i18n. We have deciced that nuxt-vitest is not a viable option for us right now and will keep an eye on it.