Closed TheJaredWilcurt closed 4 years ago
So what does does, is render all the slots of a component? For simpler cases (pure unit tests) I guess that would be OK, when you dont rely on scopedSlots or slots rendering conditionally.
Even though it makes sense, I think this will either have to stay in user land, or will be exported as a separate utility, similar to what you have now.
Current implementation is: stubbed components are just plain elements tags, that do not render any of their slots.
It's not documented anywhere because it's not intended behavior, but rather a side effect of poorly implemented shallow
, which should be stubbing all children (and their slots).
You are welcome to play with the transformVNodeArgs
function used here - it's built into core with stubbing in mind. Maybe we can expose some kind of plugin for this. What is supposed to happen? Does the child's lifecycle hooks get called? What if it has more components with more slots? If we are attempting to provide this feature (core or plugin) we should define exactly what it should (and should not) do.
I agree that this probably doesn't really belong as a core behavior; no other testing frameworks do this, and they get by fine (including Enzyme, which has a shallow
function).
@dobromir-hristov is looking into this. The idea is looking to be to provide this as a config users can enable, so you can have the behavior you like. eg config.shallowMount = { renderSlots: true }
or something, since the default is stubbing them.
Another use case for this to shallow mount a view/component that contains a 3rd-party component. Where you don't want to load the complexity of that 3rd party component, but you do want to test your code being passed into the slot. It can make snapshots more useful and less cluttered.
Let's chat about this in here https://github.com/vuejs/vue-test-utils-next/issues/108
This could be a helper. I don't mind having this feature.
use the renderStubDefaultSlot: true to solve it.
shallowMount(Component, {
props: { ... },
global: { renderStubDefaultSlot: true },
slots: { default: '...' }
});
Original: https://github.com/vuejs/vue-test-utils/issues/1216
What problem does this feature solve?
We currently have a helper file in our codebase we pull in to testing files, it contains this beauty:
It would be nice if there was a more elegant way of handling this, or at least better documented (not requiring links to 3 different places).
What does the proposed API look like?
That helper function gets used like so:
I think it would be nicer if there was something like that built in, so we could just do this:
We use this helper a lot, it seems like the kind of common "utility" that would be in Vue-Test-Utils.