Components with render function not working correctly (props not passed)

[LolliDepp]

spec with the following code

import { mount } from 'cypress-vue-unit-test';
import ADataGrid from './ADataGrid';

describe('test component', () => {
  it('works', () => {
    mount(ADataGrid, {
      propsData: {
        config: [{ field: 't', title: 'T' }],
        dataSource: [{ t: 'test' }, { t: 'toast' }]
      }
    });
    cy.contains('test').should('be.visible');
  });
});

ADataGrid is a Vue component with render function instead of a template.

propsData (and other eventual props I could add) are never passed to the component, so it's not rendered correctly

the issue stems from the isConstructor function being used:

const isConstructor = object => object && object._compiled;

to work correctly, my component would need to return true with this condition, but it doesn't.

I temporarily manually changed the code in my node_modules folder to have it return true.

I think this is happening because components with a render function never get compiled since they don't have a template...

maybe a solution could be changing the code to:

const isConstructor = object => object && (object._compiled || !object.template);

or maybe you could check if there is a render prop of type function?

[LolliDepp]

as a temporary fix:

    ADataGrid._compiled = true;
    mount(ADataGrid, { propsData })

[bahmutov]

Can you provide a full reproducible example, please?

[bahmutov]

@LolliDepp I have added setting _compiled property automatically, see the PR

[bahmutov]

🎉 This issue has been resolved in version 3.3.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀