Vue-test-utils: Missing classes in vuetify element when shallowMount

[trollepierre]

Version

1.0.0-beta.22

Reproduction link

https://codesandbox.io/s/nn2p0w8300

Steps to reproduce

When shallowMounting a with a class="my-custom-class", I cannot find this element through wrapper.find(.my-custom-class) + this class is not present in snapshot

<template>
  <v-container class="my-custom-class">

  </v-container>
</template>
````

### What is expected?

class="my-custom-class"
/>

### What is actually happening?

tag="div"
/>
```

---

Also I cannot do any find(".my-custom-class"). That is a regression compared to beta 20.

ps:
I don't care about tag="div" in this issue. Maybe it could be better to remove Vuetify prop (but it is a "could", not a "must" have in this bug)

[eddyerburgh]

Thanks for the bug report.

I'll fix the issue with the class not rendering.

The other issue, of the class not working as a selector, is intended behavior. You should select components using a component selector, name selector, or ref selector. Other selectors are not supported.

[trollepierre]

In the .find() documentation, I can read: Use any valid selector.

In the selector documentation, I can read:

CSS Selectors
Mount handles any valid CSS selector:
tag selectors (div, foo, bar)
class selectors (.foo, .bar)
attribute selectors ([foo], [foo="bar"])
id selectors (#foo, #bar)
pseudo selectors (div:first-of-type)

So I believe CSS selectors should be supported selectors.

=> Anyway I believe that issue with class not rendering will fix it.

[eddyerburgh]

Sorry that the docs are unclear, I'll rewrite them to improve clarity.

The issue won't be fixed, if it was working previously it was a bug. CSS selectors are used to match rendered HTMLElements, stubbed components don't render HTMLElements, so a class selector won't work.

[blairdow]

Hi @eddyerburgh here to say the docs are still unclear on this in my opinion. Particularly the part about descendent combinators, makes it seems like you can use find or contains on component rendered html. Maybe a sentence to the effect of what you said above describing how stubbed components dont render HTMLElements so a class selector wont work there and to use the component name instead.

Mount handles any valid CSS selector:

tag selectors (div, foo, bar)
class selectors (.foo, .bar)
attribute selectors ([foo], [foo="bar"])
id selectors (#foo, #bar)
pseudo selectors (div:first-of-type)
You can also use combinators:

direct descendant combinator (div > #bar > .foo)
general descendant combinator (div #bar .foo)
adjacent sibling selector (div + .foo)
general sibling selector (div ~ .foo)