avoriaz
avoriaz copied to clipboard
Testing custom elements without a name property
I'm using a library called Vuetify
. Now my app contains (almost) only vuetify elements like v-btn/v-toolbar/...
The problem is that I can't test anything because Avoriaz requires custom elements to have a name property and none of those custom elements have a name property...
I'm sorry if I'm totally wrong, I'm pretty new to testing javascript. Any help is appreaciated. :)
Yes you're right, avoriaz needs a custom name property to identify components.
This isn't ideal, I can have a look and see what other ways we can use to identify vue components 🖒
Hi @YassineGherbi, I've looked into Vuetify, and every component I checked has a name. Which component were you using that didn't have a name?
I realize now this is a pretty old issue, but there is a workaround in case anyone else runs into it. Assuming that the Vuetify components are registered globally, you can set a name property on any relevant components via a new vue instance for your tests.
Something along these lines:
describe ('some-component', () => {
const sandbox = sinon.sandbox.create();
let vueInstance
vuetifyComponentMock;
beforeEach(() => {
vuetifyComponentMock = { name: 'vuetify-component-name' };
vueInstance = Vue.extend();
vueInstance.use(Vuetify);
vueInstance.options.components.someVuetifyComponent.name = vuetifyComponentMock.name;
});
it('some test', () => {
const wrapper= mount(ComponentUnderTest, {
instance: vueInstance
});
});
});
I haven't actually used the approach of setting name only in quite some time though (I now stub the entire component so I can just test if props are set correctly), so it's possible I have that property wrong (vueInstance.options.components.someVuetifyComponent.name). If so, you might need to inspect the object, it should be in the vicinity.