Can't find using a component import

[Spittal]

Hey there, I'm having an issue where I cannot use a Vue component to find within a wrapper. I should note that I use vue-component-class Here's a small sample of my code

import { mount } from 'vue-test-utils';
import GameOwnerships from '@/game-ownership/GameOwnerships';
import GameOwnershipCard from '@/game-ownership/GameOwnershipCard';

// ... down the file in an 'describe' block

it('Should find based on in a component', () => {
  const wrapper = mount(GameOwnerships, { // ...stuff } );
  console.log(GameOwnershipCard);
  wrapper.find(GameOwnershipCard);
});

// ...

the result of the console log is

//  console.log(GameOwnershipCard);
{ [Function: VueComponent]
  cid: 2,
  options: //... I don't think it's relevant
  super: //... I don't think it's relevant
}

and the error thrown is

[vue-test-utils]: wrapper.find() must be passed a valid CSS selector, Vue constructor, or valid find option object

Using Versions
"vue-test-utils": "1.0.0-beta.6",
"vue": "2.5.9",
"vue-class-component": "5.0.2"

[lmiller1990]

Did you have any luck with solving this, @Spittal ? I haven't used vue-component-class before, but I can take a look on the weekend at this, I'd like to learn more about it either way.

[Spittal]

Hey! I actually didn't get very far. I tried digging into the GameOwnershipCard object to see if there's something that would satisfy the find method.

My next step would be to compare what a not decorated Vue component looks like compared to one that has the @Component decorator. Will do that over the weekend!

[doun]

wrapper.find(GameOwnershipCard.options) works ^_^

[eddyerburgh]

This is fixed in beta.9 with 27e9d79

[jfnadeau]

mount is working fine for me but shallow does not work. If I use a find by name selector (wrapper.find({ name: 'xyz' }), it works as expected. I'm using class components too.

[eddyerburgh]

This is a

[jfnadeau]

Another problem I found:

let button = wrapper.find({ name: 'xyz' });

expect(button.exists()).toEqual(true); -- OK
console.log(button.props()); -- EMPTY, but it should not be! It is working fine with mount() instead of shallow()

[jfnadeau]

FYI, this function does not work:

function getCoreProperties(component) {
return {
attrs: component.attrs,
name: component.name,
on: component.on,
key: component.key,
ref: component.ref,
props: component.props,
domProps: component.domProps,
class: component.class,
staticClass: component.staticClass,
staticStyle: component.staticStyle,
style: component.style,
normalizedStyle: component.normalizedStyle,
nativeOn: component.nativeOn
};
}

I don't know why but class component options are in component.options